JavaScript+ Vue 
二 React 全 程 实例 


通过 JavaScript 实 例 掌握 Web 前 端 开发 技术 
a 涵盖 目前 流行 的 特效 、 流 行 的 JS 技 术 、 流 行 的 Vue 与 React 框 架 

a 包括 众多 JavaScript 应 用 场景 ， 直 接 感受 实际 开发 出 来 的 页 面 效果 
s 围绕 实例 进行 讲解 ， 每 一 节 都 可 以 让 读者 掌握 一 种 实用 技术 


郑 均 辉 薛 将 编著 


Ch sinssite 


渡 革 大 党 出 版 社 


JavaScript+Vue 
十 React 全 程 实例 


郑 均 辉 薛 燃 编著 


渡 革 大 党 出 版 社 


北 京 


内 容 简 介 


本 书 基 于 理论 知识 与 开发 实践 相 结合 的 思想 , 精 选 当前 简单 、 实 用 和 流行 的 百 余 个 JavaScript 代码 实例 ， 
帮助 读者 学 习 掌握 JavaScript 脚本 语言 。 全 书 内 容 翔实 、 重 点 突出 、 通 俗 易 懂 ， 涵 盖 了 JavaScript 前 端 开 
发 的 方方面面 。 

全 书 共 分 为 13 章 ， 包 括 JavaScript 前 端 设计 、 调 试 和 开发 的 一 些 必 备 知识 ， 表 单 处 理 、DOM 控制 、 控 
件 特效 、 日 期 时 间 、 网 页 特效 、 DIV+CSS、Ajax 应 用 等 方面 的 应 用 实例 , 还 特别 增加 了 对 当下 非常 流行 的 React 
和 Vue. js 框架 的 介绍 。 本 书 的 全 部 代码 实例 均 是 对 JavaScript 技术 最 具 代 表 性 的 实践 应 用 ， 可 以 帮助 读者 
深入 学 习 JavaScript 的 开发 技巧 。 

本 书 是 学 习 掌握 JavaScript 技术 非常 好 的 图 书 ， 既 适合 JavaScript、Vue、React 前 端 初 学 者 阅读 ， 也 
适合 从 事前 端 网 页 设计 以 及 需要 学 习 前 端 技术 的 后 端 开发 工程 师 阅 读 ， 同 时 还 可 作为 高 等 院 校 和 培训 学 校 相 
关 专 业 的 教材 。 相 信 本 书 丰 富 的 内 容 和 大 量 的 实例 能 够 帮助 初学 者 快速 步 入 Web 前 端 开发 的 捷径 ， 并 衷心 地 
希望 每 一 名 前 端 爱好 者 都 可 以 成 为 有 代码 实践 和 技术 深度 的 JavaScript 高 手 。 
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读 懂 本 书 
JavaScript 无 处 不 在 


二 十 多 年 前 , 布 兰 登 * 艾 奇 (Brendan Eich) 为 Netscape 浏览 器 草草 地 设计 出 网 页 脚本 语言 (最 
早 的 JavaScript 原型 ) 的 时 候 ， 可 能 根本 不 会 预料 到 如 今 JavaScript 会 成 为 Web 开发 领域 的 第 一 编 
程 语言 。 

在 权威 的 编程 语言 排行 榜 (TIOBE〉 中 ，JavaScript 多 年 来 一 直 稳 居 在 前 几 名 之 列 。 尽 管 自 
JavaScript 诞生 之 日 起 ， 就 伴随 着 诸如 “语法 不 够 严谨 ”“ 届 辑 不 够 清晰 ”“ 代 码 管理 混乱 ”这 类 
的 批评 之 声 ， 但 这 并 没有 阻止 广大 程序 员 对 其 的 喜爱 。 

JavaScript 之 所 以 能 够 得 到 广泛 的 欢迎 和 普及 ， 与 其 简单 易学 、 使 用 灵活 ， 跨 平台 兼容 的 这 些 
特性 密 不 可 分 。 新 手 可 以 很 快 地 掌握 一 些 基本 技巧 并 实践 在 网 页 开发 中 , 高 手 可 以 凭借 扎实 的 基本 
功 、 构 建 出 逻辑 复杂 且 功 能 强大 的 Web 应 用 。 

如 今 ，JavaScript 支持 在 绝 大 多 数 的 平台 上 进行 开发 : PC 客户 端的 应 用 程序 ，Web 服务 器 端 
的 业务 罗 辑 ， 嵌 入 式 芯 片 设计 ， 物 联网 设备 研发 等 ， 均 是 JavaScript 可 以 发 挥 魔力 的 舞台 。 毫 不 夸 
张 地 讲 ， 今 天 的 JavaScript 几乎 是 无 处 不 在 。 


JavaScript 技术 特点 


JavaScript 是 一 种 基于 对 象 (Object) 和 事件 驱动 (Event Driven) 并 具有 相对 安全 性 的 脚本 语 
言 。JavaScript 广泛 应 用 于 互联 网 的 Web 开发 ， 通 过 为 HTML 网 页 添加 动态 响应 功能 来 提高 用 户 
交互 体验 。 

JavaScript 的 设计 目标 ， 就 是 一 种 基于 原型 对 象 、 弱 类 型 、 事 件 驱 动 、 跨 平台 兼容 的 解释 性 动 
态 脚本 语言 。 同 时 ， 由 于 JavaScript 具有 很 强 的 扩展 性 ， 因 此 可 以 基于 JavaScript 原生 语法 开发 出 
功能 更 为 强大 的 类 库 或 框架 。 

当然 ， 也 正 是 由 于 JavaScript 的 灵活 性 太 强 ， 各 大 浏览 器 厂商 设计 的 版 本 兼容 性 不 好 。 不 过 ， 
这 种 情况 随 着 EMCA TC39 委员 会 推出 的 标准 化 ECMAScript 脚本 语言 得 到 了 很 好 的 改善 , 相信 未 
来 JavaScript 脚本 语言 的 兼容 性 会 越 来 越 好 。 

JavaScript 扩展 类 库 和 框架 

JavaScript 之 所 以 无 处 不 在 、 广 受 欢 迎 ， 相 信和 与 其 庞大 的 扩展 类 库 和 框架 群 不 无 关系 。 例 如 ， 
ProtoType jQuery 、jQuery Mobile、AngularJS、React、 Vue.js 等 , 这 些 耳 熟 能 详 的 名 字 都 是 JavaScript 
扩展 类 库 和 框架 的 优秀 代表 。 

以 上 这 些 优秀 的 JavaScript 扩展 类 库 和 框架 不 单单 是 将 核心 功能 进行 抽象 、 集 成 和 扩展 ， 而 是 
在 设计 模式 、 功 能 架构 、 性 能 优化 等 方面 做 足 了 功夫 , 带 给 了 设计 人 员 无 与 伦比 的 编程 体验 以 及 代 
码 性 能 和 运行 效率 的 显著 提升 。 


本 书 真 的 适合 你 吗 


本 书 大 量 的 基础 代码 实例 可 以 帮助 读者 快速 掌握 JavaScript 的 编程 技巧 ， 并 应 用 到 实践 开发 之 
中 。 尤 其 是 关于 JavaScript 框架 的 提高 内 容 中 ， 通 过 对 目前 流行 的 React 和 Vue.js 框架 的 介绍 ， 帮 
助 读者 去 了 解 前 端 Web 技术 的 前 沿 方向 。 无 论 是 基础 内 容 或 提高 内 容 ， 相信 读者 都 可 以 从 中 获 益 。 


本 书 涉及 的 主要 软件 工具 、 技 术 或 框架 


Apache HTTP Mozilla Firefox Dreamweaver CS6 UltraEdit 

WebStorm Sublime Text Notepad EditPlus 

HTML MIME HTTP React 

HTMLS JavaScript ECMAScript Vue.js 

CSS3 AJAX RegExp JSON 
本 书 特点 


(1) 本 书 完全 是 从 简单 、 通 用 的 JavaScript 代码 实例 出 发 ， 抛 开 枯燥 的 纯 理 论 知识 介绍 ， 通 
过 实例 讲解 的 方式 帮助 读者 学 习 JavaScript 脚本 语言 设计 。 

(2) 本 书 内 容 涵盖 JavaScript 所 涉及 的 、 绝 大 部 分 的 前 端 开发 知识 ， 将 这 些 内 容 整合 到 一 起 
可 以 系统 地 了 解 掌握 这 门 语言 的 全 貌 ， 为 介入 大 型 Web 项 目的 开发 做 了 很 好 的 铺垫 。 

(3) 本 书 对 于 实例 中 的 知识 难点 做 出 了 详细 的 分 析 , 能 够 帮助 读者 有 针对 性 地 提高 JavaScript 
编程 开发 技巧 。 

(4) 本 书 在 知识 点 上 按照 类 别 进 行 合理 的 划分 ， 全 部 的 代码 实例 都 是 独立 的 ， 读 者 可 以 从 头 
开始 阅读 ， 也 可 以 从 中 间 开 始 阅读 ， 不 会 影响 学 习 进 度 。 

(5) 本 书 代码 遵循 重 构 原 理 ， 避 免 代码 污染 ， 真 心 希望 读者 能 写 出 优秀 、 简 洁 、 可 维护 的 代码 。 


代码 下 载 

本 书 代 码 下 载 地 址 (注意 数字 与 字母 大 小 写 ) : https://share.weiyun.com/5K9SHun。 
如 果 下 载 有 问题 ， 请 联系 booksaga(@163.com， 邮 件 主题 为 “JavaScripttrVue+React”。 
本 书 读者 


JavaScript、Vue、React 前 端 开 发 初学 者 
从 事前 端 网 页 设计 的 开发 工程 师 
需要 学 习 前 端 技术 的 后 端 开 发 工程 师 
高 等 院 校 和 培训 学 校 相关 专业 的 师 生 
本 书 第 1~11 章 由 平顶山 学 院 的 郑 均 辉 编写 ， 第 12~13 章 由 薛 疙 编写 。 
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封面 照片 由 蜂鸟 网 摄影 家 ptwkzj 先生 友情 提供 ， 在 此 表示 衷心 感谢 。 
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本 书 将 用 新 颖 的 视角 去 认识 JavaScript， 通 过 简单 流行 的 代码 实例 深度 阐述 JavaScript 的 特性 ， 
尽量 利用 IT 世界 里 有 意思 的 东西 来 激发 读者 的 学 习 兴 趣 。 本 章 将 概括 性 地 介绍 JavaScript 的 书写 
方式 、 调 试 方式 和 开发 工具 。 


1.1 HTML 中 书写 JavaScript 的 几 种 方式 


编写 JavaScript 代码 其 实 无 须 特 殊 软 件 ， 一 个 普通 的 文本 编辑 器 (如 记事 本 ) 和 一 个 Web 浏 
览 器 就 足够 了 。 用 JavaScript 编写 的 代码 需要 放 在 HTML 文档 中 才能 被 浏览 器 执行 , 有 以 下 两 种 方 
式 可 以 做 到 这 一 点 。 
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-种 方式 是 将 JavaScript 代码 放 到 文档 <head> 标 签 的 <scrip 亿 标签 中 : 


<!DOCTYPE html> 

<html> 

<head> 
<title>hello world</title> 
<script> 

alert('hello world!'); 

</script> 

</head> 

<body> 

</body> 

</html> 


将 上 面 的 代码 保存 到 HTML 文件 中 《在 记事 本 中 编写 ， 然 后 另存 为 扩展 名 为 html 的 文件 ) ， 
用 任意 浏览 器 打开 ， 就 可 以 看 到 一 个 弹出 对 话 框 。 
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种 方式 是 把 JavaScript 代码 存 为 一 个 扩展 名 为 js 的 独立 文件 。 以 前 的 做 法 是 在 文档 <head> 


里 用 <scrip 忆 标签 的 src 属性 来 指向 该 文件 : 


01 
02 
03 
04 
05 
06 
07 


<!DOCTYPE html> 
<html> 
<head> 
<title>hello world</title> 
<script src="helloworld.js"></script> 
</head> 
<body> 
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08 ”</body> 
09 </htm1> 


目前 业界 推荐 的 做 法 是 把 <script> 放 到 HTML 文档 最 后 ，</body> 标 签 之 前 (第 08 行 和 第 09 
行 之 间 ) 。 这 样 做 的 目的 是 ， 使 浏览 器 更 快 地 加 载 页 面 并 展示 给 用 户 ， 从 而 增强 用 户 体验 。 


1.2 选择 开发 工具 


近 几 年 JavaScript 的 开发 工具 也 得 到 了 蓬勃 发 展 , 大 小 工具 琳琅 满目 , 难 易 程度 也 是 不 尽 相 同 。 
比如 重量 级 的 集成 开发 平台 ， 包 括 Adobe Dreamweaver、Visual Studio 系列 和 jetBrains WebStorm 
系列 ， 具 有 简单 易学 、 适 应 性 强 、 功 能 完善 等 特点 ， 深 受 广大 开发 者 的 喜爱 。 一 些 轻 量 级 的 代码 编 
辑 器 工具 (EditPlus 和 Sublime Text) 也 非常 受 专 业 人 士 欢迎 ， 这 些 编辑 器 看 似 功能 简单 实则 扩展 
性 很 强大 ， 初 学 者 虽 不 易 掌 握 ， 但 熟练 运用 后 一 定 会 让 设计 人 员 爱 不 释 手 。 这 里 简单 介绍 三 种 
JavaScript 开发 工具 。 


1. Adobe Dreamweaver 


这 就 是 曾经 被 誉 为 “网 页 三 剑客 ”之 一 的 Dreamweaver, 备 受 广大 网 页 设计 和 开发 人 员 的 喜爱 ， 
历史 非常 悠久 。 它 的 运行 效果 如 图 1.1 所 示 。 


区 文件 {月 妨 坟 (和 宣 奋 (V) 妥 入 (D 候 rlM) 个 克 0) 会 分 (OQ 始 全 (S) 乔 DW) 。 大助 (H) Wt 、L 一 | 口 | X 


扬尘 主要 功 繁 
me 高 | cseafetEit 
cobain Te 
时 PP | Deka 
| projectstestjs ss [= 
apte 中 /nders 村 Jamaserpt RE 
| Bataa Em 
| msam 二 汉人 网 和 局 园 | tv Novie ts 
| sosaaml Dr BE ， 
| em 二 pm caahntic 四 
已 ) 


1.1 Adobe Dreamweaver CS6 


Dreamweaver CS6 版 本 支持 CSS 3、HTML 5， 并 集成 了 jQuery 代码 提示 功能 ， 是 网 页 开发 人 
员 开 发 大 型 项 目 或 长 期 使 用 的 必 备 工具 。 


2. jetBrains WebStorm 


jetBrains WebStorm 是 JavaScript 集成 开发 平台 中 针对 性 最 强 、 功 能 最 完善 且 非 常 简单 易学 的 
一 款 开发 工具 。jetBrains 公司 是 近年 来 最 成 功 的 一 家 专业 软件 平台 开发 商 ， 推 出 了 多 系列 专业 性 非 
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常 强 的 开发 工具 , 在 用 户 体验 方面 十 分 下 功夫 .WebStorm 开发 平台 就 是 专门 针对 前 端 开发 (HTML、 
JavaScript、CSS) 而 设计 的 。 图 1.2 就 是 开发 平台 界面 的 演示 效果 。 


1pt 基于 - 凋 汪 djnay: 


图 1.2 jetBrains WebStorm 


3. Sublime Text 


Sublime Text 是 JavaScript 开发 环境 IDE 中 比较 漂亮 〈 见 图 1.3) 的 且 对 开发 支持 非常 良好 的 

- 款 文本 编辑 器 ， 简 洁 、 强 大 、 高 效 。Sublime 做 了 很 多 用 户 体验 方面 的 改进 和 支持 ， 对 审美 有 要 
求 的 读者 可 果断 入 手 。 

> 一 | 


DD UneztComneE 


图 1.3 Sublime Text3 
1.3 JavaScript 的 调试 


目前 的 主流 浏览 器 均 支 持 直接 调试 JavaScript 代码 , 本 节 以 常见 的 Chrome 和 Firefox 两 款 浏览 
器 为 例 进行 介绍 。 
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这 里 先 给 出 一 段 测 试 代码 〈 详 见 源 代 码 目录 ch01-js-debug.html 文件 ) : 


【代码 1-1】 


01 <!doctype html> 

02 <htm1l lang="en"> 

03 <head> 

04 ”<!-- 添加 文档 头 部 内 容 --> 

05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
06 <meta http-equiv="Content-Language" content="zh-cn" /> 

07 <link rel="stylesheet" type="text/css" href="css/style.css"> 
08 ”<title>JavaScript 全 程 实例 </title> 

09 </head> 

10 <body> 

11 ”<!-- 添加 文档 主体 内 容 --> 


12 <header> 


13 <nav>JavaScript 基础 - 脚本 调试 </nav> 
14 </header> 

3 <hr> 

16 ”<!-- 添加 文档 主体 内 容 --> 

17 <div id="id-div-count"> 

18 </div> 

19 </body> 


20 <script type="text/javascript" src="js/ch01-js-debug.js"></script> 
21 </html> 


其 中 ，【 代 码 1-1】 中 第 20 行 代码 引 入 了 一 个 外 链 式 js 脚本 文件 ， 上 有 具体 代码 如 下 〔 详 见 源 代 
码 目录 ch01-js-debugjs 文件 ) : 


01 var v_id div count = document .getElementById("id-div-count"); 
02 var strLine; 
03 for(var i=1l; i<10; i++) { 


04 strLine = "i=" + i.toString() + "<br>"; 
05 console.log(strLine); 

06 vV_id div count.innerHTML += strLine; 

x 


下 面 分 别 使 用 Chrome 和 FireFox 浏览 器 调试 上 面 定义 的 js 代码。 
1. 使 用 Chrome 调试 


下 面 使 用 Chrome 浏览 器 运行 测试 代码 所 在 的 HTML 网 页 ， 如 图 1.4 所 示 。 打 开 Chrome 浏览 
器 的 开发 工具 面板 〈 或 按 F12 键 ) ， 如 图 1.5 所 示 。 
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js 源码 窗口 


国 ,avascnpt 全 人 = x 十 
CQ@ Iocalhost633421s-L、 女 © 


Javascript 基础 - 脚本 调试 


rn 


苔 的 己 晤 中 上 由 


图 1.4 使 用 Chrome 浏览 器 打开 图 1.5 打开 Chrome 浏览 器 js 调试 功能 


可 以 在 JavaScript 代码 的 第 08 行 添加 断 点 ， 单 击 行 号 就 可 以 ， 如 图 1.6 所 示 。 这 样 每 次 程序 
执行 到 该 行 时 中 断 ， 如 图 1.7 所 示 。 将 鼠标 放 在 某 个 变量 上 ， 就 会 显示 当前 变量 的 值 ， 然 后 通过 右 
侧 的 调试 控制 条 可 以 控制 是 否 继续 执行 下 一 行 。 


四 调试 K 码 html js-debugjs x ] + js-debugjs x 
/ee 
2| » Created by KING on 2017/7/18 让 » Created by KING on 2617/7/18, 


= document .getElenent r V_id_div_count = document-BetElementById 


re) { 
+ itostring() + “<br te ioe -ia sistciai 
Bconsole.BDlog(strLine); | Bconsole. log(strLine);, I ® (anonymous) 
Vid_div_count.innerHTHL += striine; 、 ES 
| v Scope 


» Global 


l v Call Stack 


™ Breakpoints 


@ js-debugjs8 


在 此 处 中 断 console.1og(strLine); 


» XHR/fetch Breskpoints 
* DOM greakpoints 
* Global Listeners 


* Event Listener Breakpoints 


{} Une8 Column1 {} Line8 Coumn5 


图 1.6 为 js 脚本 代码 设置 断 点 1.7 调试 脚本 代码 
2. 使 用 Firefox 调试 
下 面 使 用 Firefox 浏览 器 运行 测试 代码 所 在 的 HTML 网 页 ， 如 图 1.8 所 示 。 打 开 Firefox 浏览 


器 的 调试 功能 面板 ， 如 图 1.9 所 示 。 
下 面 在 图 1.9 的 js 源码 窗口 中 为 【代码 1-2】 中 的 第 05 行 脚本 语句 设置 断 点 ， 如 图 1.10 所 示 。 
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民 ”人 吴 考 在 二 ”加 控制 台 。 口 谓 坛 器 ”为 目 .… 
回 ”chol-js-debugjs x 
文件 日 桨 三 日 言 帮 WW 历史 加 书生 | 工 D | ee 
2 * Created by KING on 2919/61/18. 
ES 相 学 
加 Sac ny 加 | var v_id div_count = document.getElementeyId("id-div-count"); 
5 var strLine; 
和 所) 全 0 |© oal 跟 发 | 三 6 for(var i-1; icl9; i++) { 
7 strLine = "i=" + itostring() + "cbr>"; 
8 console. log(strLine); 
3 vid div_count.innerHTML += strLine; 
Javascript 基础 - 脚本 调试 2 
0 © js 源码 窗口 
1 人 了 骤 它 
i=3 会 ”时 过 违 给 出 持续 日 志 ”X 
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名 调试 信息 输出 窗口 
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图 1.8 使 用 Firefox 浏览 器 调试 js 脚本 


1.9 打开 Firefox 浏览 器 js 调试 功能 面板 


然后 ， 按 “F5” 功 能 键 重新 刷新 页 面 ， 再 按 步 进 “F11” 功 能 键 来 调试 执行 js 代码 ， 页 面 效果 
如 图 1.11 和 图 1.12 所 示 。 在 图 1.11 和 1.12 中 可 以 看 到 ， 每 次 执行 到 【代码 1-2】 中 第 05 行 脚本 
语句 设置 断 点 处 时 ，js 代码 均 会 被 中 断 ， 然 后 在 日 志 窗 口中 输出 调试 信息 (变量 “i” 计 数 器 的 数 
值 ) 。 以 上 就 是 JavaScript 脚本 语言 开发 与 调试 的 基本 过 程 方法 。 


4 Var V_id_div_count = docunent.getElenenteyId("id-div-count"); 


{ 
tostring() +“<br> 
); 


rHTML += striine; 


Ur ke 4 


辣 ”时 过 淹 答 出 


口 持 绩 日 去 XxX 


图 开发 者 工具 - javaScript 全 程 实例 - htpy/loc.。 一 口 x 
民 口音 器 加 控制 。 口 ) 调 江 器 ”为 日 
回 ”chol-js-debugjs x 

1 yo 

2 * created by KING on 2819/01/18. 

3 "/ 


图 开发 者 工具 - JavaScript 全 程 实例 - http://loc... 


民品 查看 器 。 加 控制 台 口译 试 器 ”六 


回 cho1-js-debugjs x 
arm 


Created by KING on 2819/81/18. 


3| «/ 
4 Var v_id div_count = document,getElenenteyId("id-div-count"); 


回 


口 持 综 B 志 XxX 
che1-js-debug.js:8:5 


图 1.10 使 用 Firefox 浏览 器 为 js 脚本 代码 设置 断 点 


图 1.11 使 用 步 进 (F11) 方式 调试 脚本 代码 
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图 开发 者 工具 -JavaScript 全 程 交 例 -http/loc.. 一 口 Xx 
芭 口 覃 得 固 控制 口 泽 i 要 » 日 … 
回 choljs-debugjs x 
于 9 
am 
2 * created by KING on 2819/81/18. 
3 
3 
5 
6 for(var i=1; ic18; i++) { 
7 Striine = "i=" + i.tostring() + "<br>"; 二 
ED console.log(strtine); 
3 vid div count,innerHTHL += StrLine; 
18 } 
{} © 
DPA 
会 “时 过 沪 答 出 口 的 并 6B 志 Xx 
i=1<br> che1-js-debug.js:8:5 a 
i=2<br> chel-js-debug.js 
i-3cbry chel-js-debug.js: 
i=4<br> che1-js-debug.js 
i=5¢br> che1-js-debug.js:8: 
is6<br> chel-js-debug. 
i=7<br> che1-js-debug.js:8: 
i=8<br> che1-js-debug.js 
i=9¢br> che1-js-debug.js 


图 1.12 


使 用 跨越 〈F10) 方式 调试 脚本 代码 
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本 章 介 绍 如 何 通过 JavaScript 来 控制 HTML 表单 。 表 单 是 网 页 开发 中 比较 常见 且 十 分 重要 的 
一 种 元 素 ， 在 很 多 应 用 场景 下 都 会 使 用 到 。 


2.1 JavaScript 与 HTML 表单 


HTML 表单 是 一 个 包含 多 种 表单 元 素 〈 比 如 : 文本 域 、 下 拉 列 表 、 单 选 框 、 复 选 杠 、 提 交 按 钮 
等 ) 的 区 域 。 在 HTML 表单 中 ， 用 户 可 以 输入 或 选择 多 种 类 型 的 信息 ， 然 后 提交 到 服务 器 来 处 理 。 

在 Web 开发 中 ， 通 过 JavaScript 可 以 很 有 效 地 操作 控制 表单 。 例 如 ， 验 证 表单 域 中 用 户 输入 
数据 的 合法 性 , 格式 化 表单 域 中 的 用 户 输入 数据 ,遍历 表 单 域 中 的 全 部 项 , 动态 修改 表单 域 中 某 项 
数据 ， 控 制 表单 的 提交 与 重 置 ， 等 等 。 

另外 ， 在 HTML 5 规范 中 ， 为 表单 〈<form>) 增加 了 多 个 新 的 输入 类 型 ， 提 供 了 更 好 的 输入 
控制 和 验证 ， 与 JavaScript 结合 得 更 加 完美 。 

HTML 表单 是 通过 标签 (<form>) 来 定义 的 ， 具 体 语 法 格式 如 下 : 


<form> 
“form elements... 
</form> 


2.2 ”JavaScript 遍历 表单 


HTML 表单 对 象 (Form) 中 定义 有 一 个 elements 集合 属性 ， 可 以 返回 表单 中 所 有 元 素 的 数组 
集合 。 那 么 ，JavaScript 通过 for 循环 语句 就 可 以 实现 遍历 表单 中 全 部 表单 项 的 操作 了 。 


【代码 2-2】( 详 见 源 代码 目录 ch02-js-traverse-form.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 ”<!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
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06 
07 
08 
09 
10 
hl 
12 
be, 
14 
15 
16 
17 
18 
19 
20 
21 
22 
2 
24 
25 
26 


27 
28 
之 


</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 控制 表单 - 遍历 表单 </nav> 
</header> 
<hr> 
<!-- 添加 文档 主体 内 容 --> 
<form name="formTraverse" method="get"> 
<p>First name: <input type="text" name="fname" /></p> 
<p>Last name: <input type="text" name="lname" /></p> 
<input type="submit" value="Submit" /> 
</form> 
</body> 
<script type="text/javascript"> 
War dy 
var els = formTraverse.elements; 
for(i in els) { 
var el = els[i]; 
if(el.type) 
console.log("element type : " + el.type + 
",element name : " + el.name); 
和 
</script> 
</html> 


关于 【代码 2-2】 的 说 明 : 


bd 


第 14~18 代码 通过 标签 <form> 定 义 了 一 个 表单 ， 内 部 通过 标签 <input> 定 义 一 组 文本 框 和 一 


个 提交 按钮。 
第 20 ~ 28 行 通过 <script> 标 签 定义 了 JavaScript 脚本 代码 ， 用 于 实现 对 表单 的 遍历 操作 。 


> 第 22 行 代码 通过 表单 form 的 elements 属性 , 获取 了 表单 域 中 全 部 表单 项 元 素 的 数组 集合 


(els )。 


> 第 23 ~27 行 代码 通过 for...in... 语 句 遍历 数组 集合 (els )， 并 在 控制 台中 输出 每 项 表单 元 


素 的 type 属性 和 name 属性 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 2.1 所 示 。 
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JavaScript 控制 表单 - 遍历 表单 


Firstname:[ | 

| 

Submit 

中 口 到 年 加 BNE 口 再 t 生 () 相 tN Gt 为 日 … x 
会 时 过 各 疆 出 口 # 纺 B 志 


Element type : text，element name : fname ch82-js-traverse-formhtml:34:13 
element type : text，element nane : lname che2-js-traverse-form.html:34:13 
element type : submit，element name : che2-js-traverse-form.html:34:13 


2.1 JavaScript 遍历 表单 


2.3 通过 name 和 id 访问 表单 元 素 


在 JavaScript 中 ， 可 以 通过 表单 元 素 的 name 属性 和 id 属性 来 访问 该 控件 。 对 于 name 属性 需 
要 使 用 getElementsByName() 方 法 ， 而 对 于 id 属性 则 需要 使 用 getElementByld() 方 法 ， 这 两 种 方法 
在 使 用 上 是 有 所 区 别 的 。 


【代码 2-3】( 详 见 源 代 码 目录 ch02-js-get-ele.html 文件 ) 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
了 
12 
14 
ii 
16 
17 


<!doctype html> 
<html lang="en"> 
<head> 


<!-- 添加 文档 头 部 内 容 --> 
<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 控制 表单 - 通过 name 和 id 访问 控件 </nav> 
</header> 
<hr> 
<!-- 添加 文档 主体 内 容 --> 
<form name="formTraverse" method="get"> 
<p>First Name: <input type="text" name="fname" id="id-fname" /></p> 
<p>Last Name: <input type="text" name="lname" id="id-lname" /></p> 
<input type="button" id="id-get-name" onclick="on get name();" 


value=" 获 取 用 户 名 " /> 
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18 </form> 
19 </body> 
20 <script type="text/javascript"> 


2 function on get name() { 

22 Var Dn_fname = document .getElementsByName ("fname"); 
23 var id lname = document .getElementById("id-lname"); 
24 console.log("First Name : " + n fname[0] .value); 
25 console.log("Last Name : " + id lname.value); 

26 } 

27 </script> 

28 </html> 


关于 【代码 2-3】 的 说 明 : 

@ 第 15~16 代码 通过 标签 <input> 定 义 一 组 文本 框 ， 而 且 同 时 增加 了 name 属性 和 id 属性 的 
定 疲 。 

e@ 第 22 行 代码 通过 getElementsByName("fname") 方 法 ， 实 现 了 对 第 15 行 代码 定义 标签 <input 
name="fname"> 的 访问 。 不 过 ， 需 要 注意 的 是 该 方法 返回 的 是 一 个 控件 对 象 的 数组 集合 ， 所 
以 第 24 行 代码 中 需要 先 使 用 数组 下 标 格式 ， 再 通过 value 属性 获取 用 户 输入 的 数据 信息 。 

@ 第 23 行 代码 是 通过 getElementById("id-lIname") 方 法 ， 实 现 对 第 16 行 代码 定义 标签 <input 
id="id-Iname"> 的 访问 。 该 方法 直接 返回 了 该 控件 对 象 ， 所 以 第 25 行 代码 可 以 直接 通过 value 
属性 获取 用 户 输入 的 数据 信息 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 2.2 所 示 。 
文件 日 “ 闹 很 日 查看 历史 G 书签 @ 工具 中 帮助 呈 口 


4 
园 Javascript 全 查实 例 x | 国 
CG © localhost63 躁 | … 安 | 鸭 | 三 


JavaScript 控制 表单 - 通过 name 和 id 访问 控件 


First Name: |King 


Last Name: |Wang 


民 吕 雪 委 固 接 寺 Ss 口译 开 » 目 … X 
言 加 | 过 湾 输 出 持续 日 志 
错 性 ”敬告 有 ES 信息 调 t css XHR 请 求 


First Name : King che2-js-get-ele.html:32:9 
Last Name : Wang ch82-js-get-ele.htm1;33;9 


2.2， JavaScript 通过 name 和 id 访问 控件 


12 | JavaScript+Vue+React 全 程 实例 


2.4 动态 修改 表单 控件 的 值 


通过 JavaScript 可 以 动态 修改 表单 中 控件 的 值 , 包括 文本 框 内 容 、 下 拉 菜 单 选项 文本 和 按钮 名 
称 等 ， 下 面 就 介绍 一 个 动态 修改 表单 控件 值 的 代码 实例 。 


【代码 2-4】( 详 见 


01 <!doctype html> 

02 <htm1l lang="en"> 

03 <head> 

04 ”<!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 

08 ”<!-- 添加 文档 主体 内 容 --> 


09 <header> 


10 <nav>JavaScript 控制 表单 - 动态 修改 表单 控件 的 值 </nav> 

入 </header> 

12 <hr> 

13 ”<!-- 添加 文档 主体 内 容 --> 

14 <form name="formTraverse" method="get"> 

15 <p>First Name: <input type="text" name="fname" id="id-fname" 
value="King" /></p> 

16 <p>Last Name: <input type="text" name="lname" id="id-lname" 
value="Wang" /></p> 

7 <select id="id-sel-gender"> 

18 <option value="0"> 请 选择 . . .</option> 

19 <option value="1"> 男 </option> 

20 <option value="2"> 女 </option> 

最 四 </select><br><br><br><br><br><br> 


22 <input type="button" id="id-modify-text" onclick="on modify text();" 
value=" 修 改 控件 文本 "” /> 

23 </form> 

24 </body> 

25 <script type="text/javascript"> 

26 function on modify text() { 


27 document .getElementById("id-fname") .value = "Tina"; 

28 document .getElementById("id-lname") .value = "Xi"; 

29 Var len = document .getElementById("id-sel-gender") .options.length; 
30 for (let i=0; i<len; i++) 


又 下 document .getElementById ("id-sel-gender") .options[i].innerText = 
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32 document .getElementById("id-sel-gender") .options[i] .value; 
33 document .getElementById("id-modify-text") .value = "文本 已 经 修改 "; 
34 } 

35 </script> 

36 </html> 


关于 【代码 2-4】 的 说 明 : 

@ 第 14~23 代码 在 表单 内 定义 了 一 组 文本 框 、 一 个 下 拉 菜 单 和 一 个 按钮 控件 。 

@ 第 27~28 行 代码 通过 设 定 新 的 value 属性 值 ， 修 改 了 第 15~16 行 代码 定义 的 文本 域 显示 
内 容 。 

@ 第 30~32 行 代码 通过 <selecf> 控 件 的 options 属性 ， 修 改 了 第 17~21 行 代码 定义 的 下 拉 菜 单 
的 显示 内 容 。 

@ 第 33 行 代码 通过 设 定 新 的 value 属性 值 ， 修 改 了 第 22 行 代 码 定义 的 按钮 名 称 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 2.3 所 示 。 继 续 单 击 页 面 中 的 
“修改 控件 文本 ”按钮 ， 页 面 更 新 后 的 效果 如 图 2.4 所 示 。 


文件 日 编辑 四 查看 MW) 历史 (9) 书签 @) 工具 帮助 ( 册 口 


x 文件 日 妨 各 日 查看) 历史 (9 书签 B) 工具 中 帮助 HH) 口 x 
国 1avascript 全 得 实例 x | 证 四 国 Javascript 全 企 实 刚 X 用 回 
GQ | © localhost63 器 … 全 |» 三 GC © localhost63 跟 … 个 | 必 三 
JavaScript 控制 表单 - 动态 修改 表单 控件 的 值 JavaScript 控制 表单 - 动态 修改 表单 控件 的 值 
First Name: [King First Name: |Tina 
Last Name: /Wang Last Name: xi 
[ol 
2 
2 
文本 已 经 修改 
图 23 JavaScript 动态 修改 表单 控件 的 值 (一 ) 图 2.4 JavaScript 动态 修改 表单 控件 的 值 (二 ) 


2.5 获取 表单 内 文本 框 的 数量 


文本 框 (<input type="text"> ) 是 HTML 表单 中 常用 的 元 素 ，JavaScript 通过 筛选 累计 表单 中 全 
部 <input> 标 签 的 type 属性 值 是 否 为 text 类 型 就 可 以 实现 获取 表单 中 全 部 文本 框 数 量 的 功能 。 


14 | Javascript+Vue+React 全 程 实例 


【代码 2-5】( 详 见 源 代码 目录 ch02-js-input-text-count.html 文件 ) 


01 <!doctype html> 
02 <htm1l lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 表单 - 获取 表单 内 文本 框 的 数量 </nav> 
11 </header> 

12 <hr> 

13 <!-- 添加 文档 主体 内 容 --> 


14 <form name="" method="get"> 


3 <p>First name: <input type="text" name="fname"/></p> 
16 <p>Middle name: <input type="text" name="mname"/></p> 
17 <p>Last name: <input type="text" name="lname"/></p> 
18 <input type="submit" value="Submit" /> 

19 <input type="reset" value="Reset" /> 

20 </form> 

21 </body> 

22 <script type="text/javascript"> 

2 Var i, iCounts = 07 

24 var inputs = document .getElementsByTagName ("input"); 
2 for (i = 0; i < inputs.length; i++) { 

26 var el = inputs[i]l7 

2 if (el.type == "text") 

28 iCounts++; 

29 站 


30 console.1og ("表单 内 文本 框 的 数量 : " + iCounts) ; 
31 </script> 
32 </html> 


关于 【代码 2-5】 的 说 明 : 


。 第 14~20 代码 在 表单 内 定义 了 一 组 文本 框 (共计 3 个 ) 和 一 组 按钮 控件 (共计 2 个) 
。 第 27~28 行 代码 通过 for 循环 语句 ， 依 次 判断 <input> 标 签 控件 的 type 属性 值 是 否 为 “text” 
来 甄别 该 控件 是 否 为 文本 框 。 如 果 判 断 结果 为 “true"， 就 通过 累加 器 变量 iCounts 计数 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 2.5 所 示 。 
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文件 日 等 犁 日 坦 看 W， 历史 书签 B 工具 中 ”帮助 = 
国 ,avascript 全 入 安 例 x eb 加 


© | @ loclhost:63342/js-total-samples/ch02/ch0 v 跟 ，… 个 | 为 三 


Javascript 控制 表单 - 获取 表单 内 文本 框 的 数量 


First name: 


Middle name: 


Last name: 
Submit Reset 
[rE 


人 疹 呈 过 起 给 出 口 持续 昌 志 
表单 内 文本 框 的 数量 ;3 che2-js-input-text-count.html:38:5 


3| 


2.5 JavaScript 获取 表单 内 文本 框 的 数量 


2.6 ”修改 表单 的 提交 方式 


HTML 表单 <form> 中 定义 有 一 个 method 属性 ,用 于 规定 提交 表单 数据 的 方式 (GET 和 POST )。 
JavaScript 可 以 通过 修改 method 属性 值 改 变 表单 的 提交 方式 , 下 面 给 出 一 个 修改 表单 提交 方式 的 代 
码 实 例 。 


【代码 2-6】( 详 见 源 代 码 目录 ch02jjs-modify-form-method.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 表单 - 修改 表单 的 提交 方法 </nav> 
11 </header> 

> 

13 <!-- 添加 文档 主体 内 容 --> 

14 <form name="formMethod" method="" action="#"> 

15 <p> 请 选择 表单 提交 方法 : 

16 <select name="selMethod"> 

7 <option value=""> 请 选择 . . .</option> 
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18 <option value="get">get 方式 </option> 
19 <option value="post">post 方式 </option> 
20 </select> 
2 </p> 
22 <input type="button"” value=" 修 改 提交 方法 " onclick="modifyMethod()"/> 
23 </form> 
24 </body> 
25 <script type="text/javascript"> 
26 function modifyMethod() { 
2 var fMethod = document.formMethod; // TODO: 获取 表单 DOM 
28 var selMethod = fMethod.selMethod.value; // TODO: 选择 的 方法 
29 fMethod.method = selMethod; 
30 console.1og ("表单 当前 选择 的 提交 方法 : " + fMethod.method); 
3 } 
32 </script> 
33 </html> 


关于 【代码 2-6】 的 说 明 : 
@ 第 16~20 代码 在 表单 内 定义 了 下 拉 选 择 框 (selMethod )， 定 义 了 “get” 和 “post” 两 种 表单 


提交 方式 的 选择 项 。 


@ 第 28~29 行 代码 先 获取 了 下 拉 选 择 框 ( selMethod ) 的 选项 值 ， 然 后 通过 该 值 修改 (重新 定 


义 ) 表单 (fMethod) 的 “method” 属 性 ， 从 而 实现 了 对 表单 提交 方法 修改 的 功能 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 2.6 和 图 2.7 所 示 。 


文件 四 总 有 日 二 看 W， 历史 加 书 入 上 工具 四 才 御 由 ”XX | | 文件 日 篇 如 四 吉 看 WJ 历史 加 书签 @) 工具 四 才 觅 由 ” 久 
加 Javascript 全 程 实例 x | 辆 国 | | 贺 ,evascript 全 在 实例 x lo lB 
y GC | © localhos 跟 个 | 为 | 三 GC © loclhos 跟 … 人 个 | 必 三 
Javascript 控制 表单 - 修改 表单 的 提交 方法 JavaScript 控制 表单 - 修改 表单 的 提交 方法 
请 选择 表单 提交 方法 : get 方 式 地 请 选择 表单 提交 方法 : | post 方 式 ~ 
修改 提交 方法 
民 人 口 坦 看 器 回 控制 台 ” 口 调试 器 » 日 … x 民 分 查看 器 加 控制 ” 口 调试 器 »》 目 … X 
会 时 过 滤 输 出 持续 日 志 会 时 过 湾 输 出 持续 日 志 
表单 当前 选择 的 提交 方法 : get ~form-method.html:39:9 表单 当前 选择 的 提交 方法 : post ~form-method.html :39:9 


图 2.6 JavaScript 修改 表单 的 提交 方法 (get) 2.7 JavaScript 修改 表单 的 提交 方法 (post) 
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在 


2.7 ”动态 指定 表单 的 提交 方式 


前 一 个 代码 实例 的 基础 上 ， 通 过 JavaScript 可 以 进一步 动态 指定 表单 的 提交 方式 ， 具 体 就 是 


通过 操作 表单 <form> 对 象 的 submit() 方 法 来 实现 的 。 


【代码 2-7】( 详 见 源 代码 目录 ch02js-form-dyn-method 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
12 
3 
14 
15 
16 
13 
18 
i 
20 
21 
22 
23 
24 
25 
26 
27 
28 
区 六 
30 
2 
33 
34 


<!doctype html> 
<html lang="en"> 
<head> 


<!-- 添加 文档 头 部 内 容 --> 
<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 控制 表单 - 动态 指定 表单 的 提交 方式 </nav> 
</header> 
<hr> 
<!-- 添加 文档 主体 内 容 --> 
<form name="formMethod" method="" action="ch02-js-form-dyn-submit.php"> 
<p>First name: <input type="text" name="fname"/></p> 
<p>Last name: <input type="text" name="lname"/></p> 
<p> 请 选择 表单 提交 方法 : 
<select name="selMethod"> 
<option value=""> 请 选择 . . .</option> 
<option value="get">get 方式 </option> 
<option value="post">post 方 式 </option> 
</select> 
</p> 
<input type="button" value=" 修 改 提 交 方 法 " onclick="modifyMethod () "/> 
</form> 


</body> 
<script type="text/javascript"> 
function modifyMethod() { 

var fMethod = document.formMethod; // TODO: 获取 表单 DOM 
var selMethod = fMethod.selMethod.value; // TODO: 选择 的 方法 
console.1og ("表单 当前 选择 的 提交 方法 : " + selMethod); 
fMethod.method = selMethod; // TODO: 修改 选择 的 提交 方法 
fMethod.submit (); 


JavaScript+Vue+React 全 程 实例 
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35” </script> 
36 </html> 
【代码 2-7】 在 【代码 2-6】 的 基础 上 做 了 如 下 修改 : 
@ 第 14 行 代码 在 表单 (fMethod ) 的 声明 定义 中 通过 “action” 属性 指定 提交 的 服务 端 PHP 文 
件 ("ch02-js-form-dyn-submit.php" )。 
”第 15~26 代码 增加 定义 了 一 组 文本 框 ， 用 于 输入 用 户 的 名 字 。 
@ ”第 33 行 代码 通过 使 用 表单 (fMethod ) 的 “submit0” 方 法 ， 从 而 实现 了 动态 指定 表单 提交 方 
式 并 进行 提交 的 功能 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 使 用 “get” 方 式 提交 表单 的 效果 如 图 2.8 所 示 。 
文件 旧 ” 编 名 旧 ” 膏 看 WW 历史 回 书签 @@) 工具 中 部 助 (和 ””X | 文件 归 ” 第 名 四 二 者 ) 历史 加 书 等 鲜 次 四 
JavaScript 全 程 安 例 x It 国 | localhost:9090/js-total-samples/ 叶 xX | 十 加 
扣 ) > CC © loclhost 跟 | … 个 | 鸭 | 三 | 上 (€)3 GCG|O ba 跟 沪 | 三 
Vis-total-samples/ch02/ch02-js-form- 
Javascript 控制 表单 - 动态 指定 表单 的 提交 方式 dyn-submit.php?fname=King& 


Iname=Wang&selMet =ge: 


First name: |king 


Form Method : get. 
Last name: |Wang Form fname : King. 


请 选择 表单 提交 方法 :|[get 方 式 | 由 Form Iname : Wang. 


修改 提交 方法 | 
图 2.8 JavaScript 动态 指定 表单 的 提交 方式 (get) 
如 图 2.8 所 示 ， 使 用 “get” 方 式 提交 表单 时 ，url 地 址 中 是 显示 “query string ”参数 信 息 的 。 


然后 使 用 “post” 方 式 重新 提交 一 下 表单 ， 效 果 如 图 2.9 所 示 。 
文件 轨 ”篇 壤 旧 ” 评 看 WW 历史 加 书 符合 工具 中 基肥 串口 


localhost9090/js-total-samples/c X | 十 回 


交 
JavaScript 全 程 实例 x job B | 
€)F OC © localhost? 跟 | … 个 | 为 | 三 儿 <) 人 GO oal 跟 罗 三 


/js-total-samples/ch02/ch02-js-form- 
JavaScript 控制 表单 - 动态 指定 表单 的 提交 方式 dyn-submitphp?--------。 


First name: |King Form Method : post. 
Form fname : King. 
Form Iname : Wang. 


Last name: |w: 


CD 
修改 提交 方法 | 


图 2.9 JavaScript 动态 指定 表单 的 提交 方式 (post) 
如 图 2.9 所 示 ， 使 用 “post” 方 式 提交 表单 时 ，url 地 址 中 是 隐藏 “query string” 参 数 信息 的 。 
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2.8 动态 设置 焦点 控件 


HTML DOM 对 象 中 定义 有 一 个 focus() 方 法 ， 用 于 为 控件 设置 焦点 ，JavaScript 可 以 通过 该 方 
法 实现 动态 设置 控件 焦点 的 操作 。 


【代码 2-8】( 详 见 源 代 码 目录 ch02-js-set-focus-ele.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 


07 <body onload="on load set focus()"> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 表单 - 动态 设置 焦点 控件 </nav> 
11 </header> 

2 <hr> 

13 <!-- 添加 文档 主体 内 容 --> 


14 <form name="formTraverse" method="get"> 


rh <p>First Name: <input type="text" name="fname" id="id-fname" 
value="King"/></p> 
16 <p>Last Name: <input type="text" name="lname" id="id-lname" 
value="Wang"/></p> 
kr br <input type="button" id="id-get-focus-ele-fname" 
onclick="on load set _ focus ('id-fname');" value=" 动 态 设置 ftname 焦点 "/> 
18 <input type="button" id="id-get-focus-ele-lname" 


onclick="on load _set_focus ('id-lname');" value=" 动 态 设置 Iname 聚焦 "/> 
19 </form> 
20 </body> 
21 <script type="text/javascript"> 
22 function on load set focus(thisid) { 
kk document .getElementById (thisid) .focus(); 
24 } 
25 </script> 
26 </html> 


关于 【代码 2-8】 的 说 明 : 


@ 第 15~ 16 行 代码 在 表单 内 定义 了 一 组 文本 框 (共计 2 个 )， 用 于 测试 动态 设置 焦点 的 控件 。 
@ 第 17~ 18 行 代码 定义 了 一 组 按钮 控件 (共计 2 个 ), 用 于 实现 对 文本 框 动 态 设置 焦点 的 操作 。 
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@ 第 22~24 行 代码 是 “on load set focus0)” 方法 的 实现 , 通过 对 获取 的 元 素 对 象 使 用 “focus()” 
方法 来 实现 对 该 元 素 动态 设置 焦点 的 功能 。 


2.9 动态 获取 焦点 控件 


前 一 个 实例 中 实现 了 动态 设置 焦点 控件 的 操作 ， 下 面 继续 实现 动态 获取 焦点 控件 的 操作 。 在 
HTML DOM 对 象 中 定义 有 一 个 只 读 的 “document.activeElement” 属 性 , 可 以 返回 HTML 文档 中 当 
前 取得 焦点 的 元 素 。 下 面 介绍 一 个 通过 JavaScript 动态 获取 焦点 控件 的 代码 实例 。 


【代码 2-9】( 详 见 源 代码 目录 ch02jjs-get-focus-ele.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 


07 <body onclick="on active click();"> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 表单 - 动态 获取 焦点 控件 </nav> 
11 </header> 

12 <hr> 

13 <!-- 添加 文档 主体 内 容 --> 


14 <form name="formTraverse" method="get"> 


15 <p>First Name: <input type="text" name="fname" id="id-fname" 
value="King" /></p> 

16 <p>Last Name: <input type="text" name="lname" id="id-lname" 
value="Wang" /></p> 

7 <input type="button" id="id-get-focus-ele" value=" 动 态 获取 焦点 控件 "/> 

18 </form> 

19 </body> 

20 <script type="text/javascript"> 

21 function on active click() { 

22 console.log (document .activeElement .id); 

23 } 


24 </script> 
25 </html> 
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关于 【代码 2-9】 的 说 明 : 

@ 第 07 行 代码 为 <body> 元 素 定义 了 单 击 “onclick” 事 件 方法 (on active_click() )， 这 样 当 单 击 
表单 中 的 控件 时 会 触发 该 “onclick” 事 件 。 

@ 第 14~18 代码 在 表单 内 定义 了 一 组 文本 框 ( 共 计 2 个 ) 和 一 个 按钮 ,用 于 测试 动态 获取 焦点 

@ 第 21~23 行 代码 是 “on active click)” 方 法 的 实现 ， 第 22 行 代码 通过 “document. 
activeElement.,id” 属性 动态 获取 焦点 控件 的 id 属性 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 , 依次 通过 点 击 操作 使 得 表单 中 的 控件 获取 焦 
点 ， 有 具体 效果 如 图 2.10 所 示 。 


文件 日 篇 生 日 查看 历史 加 书 共 加 | 工具 D -帮助 Hi。 义 
贺 ,avascript 全 息 安 例 x | 二 日 
> GC © localhost 器 … 个 | 罗 三 
Javascript 控制 表单 - 动态 获取 焦点 控件 
First Name: |King 
Last Name: Wang 
民品 坦 看 器 器 控制 台 口 调 z 吴 » 日 … x 
会 时 过 逢 给 出 口 持 污 日 志 
id-fname -Bet-focus-ele.htm1:38:9 
id-lname ~get-focus-ele.html:30:9 
id-get-focus-ele -get-focus-ele.html:38:9 


图 2.10 JavaScript 动态 获取 焦点 控件 


2.10 ”初始 化 表单 里 的 所 有 控件 


在 某 些 设计 场景 下 ，HTML 页 面 加 载 后 需要 为 表单 中 的 控件 初始 化 默认 值 。 要 实现 该 功能 ， 
既 可 以 通过 HTML 表单 控件 的 属性 来 实现 , 也 可 以 通过 JavaScript 来 动态 操作 。 下 面 介绍 一 个 通过 
JavaScript 实现 初始 化 表单 里 的 所 有 控件 的 代码 实例 。 


【代码 2-10】( 详 见 源 代码 目录 ch02-js-init-form-ele.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 
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05 <title>JavaScript 全 程 实例 </title> 
06 </head> 
07 <body onload="initAllEle();"> 
08 <!-- 添加 文档 主体 内 容 --> 
09 <header> 
10 <nav>JavaScript 控制 表单 - 初始 化 表单 里 的 所 有 控件 </nav> 
11 </header> 
2 <hr> 
13 <!-- 添加 文档 主体 内 容 --> 
14 <form name="formTraverse" method="get"> 
I <p>First Name: <input type="text" name="fname" id="id-fname"/></p> 
16 <p>Last Name: <input type="text" name="lname" id="id-lname"/></p> 
17 <p> 请 选择 性 别 : 
18 <select name="selMethod"> 
19 <option value=""> 请 选择 . . .</option> 
20 <option value="get"> 男 性 </option> 
2 <option value="post"> 女 性 </option> 
22 </select> 
2 </p> 
24 <p>Birth: <input type="date" name="birth" id="id-birth"/></p> 
2 <p>Email: <input type="email" name="email" id="id-email"/></p> 
26 <p>Hobby: <br> 
2 <input type="checkbox" name="hobby" value="sport"/>Sport<br> 
28 <input type="checkbox" name="hobby" value="reading"/>Reading<br> 
29 <input type="checkbox" name="hobby" value="tour"/>Tour<br> 
30 <input "checkbox" name="hobby" "music"/>Music<br> 
二 <input "checkbox" name: obby™" "movie"/>Movie<br> 
32 <input type="checkbox" name="hobby" "dance"/>Dance<br> 
33 </p> 
34 <input type="submit" value=" 提 交 "/> 
35 </form> 
36 </body> 
37 <script type="text/javascript"> 
38 function initAllEle() { 
39 // TODO: text 
40 document .getElementById("id-fname") .value = "King"; 
41 document .getElementsByName ("lname") [0] .value = "Wang"; 
42 // TODO: select 
43 document .getElementsByName ("selMethod") [0] .selectedIndex = 1; 
44 // TODO: 创建 一 个 当前 日 期 对 象 
45 Var now = new Date(); 
46 // TODO: 格式 化 日 ， 如 果 小 于 9， 前 面 补 0 
47 var day = ("0" + now.getDate()).slice(-2); 
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48 
49 
50 
5 
5 
53 
54 
55 
56 
5 
58 
59 


} 


// TODO: 格式 化 月 ， 如 果 小 于 9， 前 面 补 0 
Var month = ("0" + (now.getMonth() + 1)).slice(-2); 
// TODO: 完整 日 期 格式 
var today = now.getFullYear() + "-" + (month) + "-" + (day); 
document .getElementById("id-birth") .value = today; 
// TODO: email 
document .getElementById("id-email") .value = "king@email .com"; 
// TODO: checkbox 
var checkHobby = document .getElementsByName ("hobby"); 
for (var i in checkHobby) 
checkHobby [i] .checked = true; 


60 </script> 
61 </html> 


关于 【代码 2-10】 的 说 明 : 
@ 第 07 行 代码 为 <body> 元 素 定义 了 页 面 加 载 “onload” 事 件 方法 (initAlIEle() )， 用 于 在 页 面 加 


载 完成 后 对 页 面 中 的 控件 进行 初始 化 操作 。 


@ 第 14~35 行 代码 在 表单 内 定义 了 若干 控件 ， 包 括 文本 框 、 下 拉 选 择 框 、Email 文 本 框 、 日 期 


文本 框 和 复 选 框 ， 用 于 测试 控件 初始 化 操作 。 


@ 第 38~59 行 代码 是 “initAllEle()” 方 法 的 实现 ， 通 过 JavaScript 进行 文本 框 、 下 拉 选 择 框 、 


Email 文本 框 、 日 期 文本 框 和 复 选 框 的 初始 化 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 2.11 所 示 。 


Em MET 
国 ,vascript 全 三 x lm 加 
CG © loclhost6334 躁 … 个 | 必 三 


JavaScript 控制 表单 - 初始 化 表单 里 的 所 有 控件 


First Name: |King 


Last Name: |Wang 


请 选择 性 别 : [男性 “| 


Birth: 


Email: [angeemaiLcom 


Hobby: 

回 Sport 
回 Reading 
回 Tour 

回 Music 
回 Movie 
回 Dance 


提交 


2.11 JavaScript 初始 化 表单 里 的 所 有 控件 
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2.11 复 选 框 全 选 、 取 消 及 判断 是 否 选中 的 方法 


其 实在 前 面 表单 控件 初始 化 的 实例 中 已 经 使 用 了 复 选 框 全 部 选中 的 操作 了 。 下 面 就 完整 地 讲 
解 一 个 如 何 通 过 JavaScript 脚本 实现 复 选 框 的 全 选 、 取 消 、 部 分 选中 及 判断 是 否 选中 方法 的 代码 
实例 。 


【代码 2-11】( 详 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 表单 - 复 选 框 全 选 、 取 消 及 判断 是 否 选中 的 方法 </nav> 
11 </header> 

2 

13 <!-- 添加 文档 主体 内 容 --> 


14 <form name="formTraverse" method="get"> 


15 <p>Hobby ( 复 选 框 checkbox) : <br> 

16 <input type="checkbox" name="hobby" value="sport"/>Sport<br> 

2 <input type="checkbox" name="hobby" value="reading"/>Reading<br> 

18 <input type="checkbox" name="hobby" value="tour"/>Tour<br> 

9 <input type="checkbox" name="hobby" value="music"/>Music<br> 

20 <input type="checkbox" name="hobby" value="movie"/>Movie<br> 

汉 <input type="checkbox" name="hobby" value="dance"/>Dance<br> 

2 </p> 

23 <input type="button" onclick="on checkbox all click()" 
value=" 全 部 选择 "/> 

24 <input type="button" onclick="on checkbox none click()" 
value=" 全 部 取消 "/> 

25 <input type="button" onclick="on checkbox sel click()" 
value=" 部 分 选择 "/> 

26 <input type="button" onclick="on checkbox checked click()" 


value=" 判 断 是 否 被 选中 "/> 
27 </form> 
28 </body> 
29 <script type="text/javascript"> 
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function on checkbox all click() { 
// TODO: checkbox 
Var checkHobby = document .getElementsByName ("hobby"); 
for (var i in checkHobby) 
checkHobby[i]l .checked = true; 
} 
function on checkbox none click() { 
// TODO: checkbox 
Var checkHobby = document .getElementsByName ("hobby"); 
for (var i in checkHobby) 
checkHobby[i] .checked = false; 
} 
function on checkbox sel click() { 
// TODO: checkbox 
Var bChecked = [true, false, true, true, false, truel]; 
Var checkHobby = document .getElementsByName ("hobby"); 
for (var i in checkHobby) 
checkHobby[i] .checked = bChecked[i]; 
. 
function on_ checkbox checked click() { 
// TODO: checkbox 
Var checkHobby = document .getElementsByName ("hobby"); 
for (var i = 0; i < checkHobby.length; i++) { 
if (checkHobby[i] .checked == true) 
console.log(checkHobby[i] .value + " is checked."); 
else 
console.log (checkHobby[i] .value + " is not checked."); 


} 
</script> 
</html> 


关于 【代码 2-11】 的 说 明 : 
@ 第 16~21 行 代码 在 表单 内 定义 了 一 组 复 选 框 , 用 于 测试 复 选 框 全 选 、 取 消 、 部 分 选择 及 判断 


是 否 选中 的 操作 。 

第 29 ~ 59 行 代码 是 对 复 选 框 进行 全 选 、 取 消 、 部 分 选择 及 判断 是 否 选中 的 操作 ， 主 要 是 通过 
复 选 框 的 “checked” 属性 来 实现 的 。 

> 第 30~35 行 代码 定义 的 “on_checkbox all_click0)” 方法， 是 实现 复 选 框 全 部 选择 的 方法 。 
> 第 36~41 行 代 码 定义 的 “on_checkbox_none _ click0)” 方 法 ， 是 实现 复 选 框 全 部 取消 选择 的 
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> 第 42~48 行 代码 定义 的 “on_checkbox_sel_click()” 方 法 ， 是 实现 复 选 框 部 分 选择 的 方法 。 
其 中 ， 第 44 行 代码 定义 了 一 个 布尔 型 数组 ， 用 于 存放 复 选 框 项 是 否 被 选中 的 状态 。 
> 第 49~58 行 代码 定义 的 “on_checkbox_checked _ click0)” 方 法 ， 是 实现 判断 某 个 复 选 框 是 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 , 复 选 框 部 分 选择 和 判断 是 否 判断 是 否 被 选中 
的 效果 如 图 2.12 所 示 。 


国 ,avascript 全 程 实例 


> CG © localhost6 


JavaScript 控制 表单 - 复 选 框 全 选 、 取 消 及 判断 是 否 选中 的 方法 


Hobby ( 复 选 杠 checkbox): 
国 spor 

回 Reading 

Tour 

Music 

四 Movie 

团 Dance 


民 Dinspector 回 Console D Debugger 为 器 x 


会 时 Filter output 回 Persist Logs 
sport is checked. che2-js-checkbox-oper.html:65:17 
reading is not checked. Che2-js-checkbox-oper.html:67:17 
tour is checked. che2-js-checkbox-oper.html:65:17 
music is checked. che2-js-checkbox-oper.html:65:17 
movie is not checked. Che2-js-checkbox-oper .html:67:17 
dance is checked. che2-js-checkbox-oper.html:65:17 


2.12 JavaScript 复 选 框 全 选 、 取 消 及 判断 是 否 选中 的 方法 


2.12 ”如 何 使 用 隐藏 控件 


在 HTML 表单 <form> 中 还 可 以 定义 一 类 隐藏 控件 (type=hidden) ， 这 类 控件 在 页 面 中 是 不 显 
示 ( 隐 藏 ) 的 , 但 可 以 实现 一 些 比较 特殊 的 功能 。 下 面 介绍 一 个 通过 使 用 隐藏 表单 控件 实现 根据 用 
户 年 龄 自动 分 配 卧铺 铺位 的 代码 实例 。 


【代码 2-12】( 详 见 源 代码 目录 ch02-js-hidden-ele.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
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</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 控制 表单 - 如 何 使 用 隐藏 控件 </nav> 
</header> 
<hr> 
<!-- 添加 文档 主体 内 容 --> 


<form name="formHidden" method="get" action="ch02-js-hidden-ele.php"> 


<table> 
<caption> 乘 客 卧 铺 铺位 分 配 </caption> 
<tr> 
<th> 姓 名 : </th> 
<td><input type="text" name="name" id="id-name"/></td> 
</tr> 
<tr> 
<th> 出 生年 月 : </th> 
<td> 
<input type="month" name="birth" id="id-birth" 
onchange="on birth change (this.id);"/> 
<input typ hidden" name="hidden-level" 
id="id-hidden-level" value=""/> 
</td> 
</tr> 
<tr> 
<th></th> 
<td><input type="submit" id="id-submit" value=" 提 交 "/></td> 
</tr> 
</table> 
</form> 
</body> 
<script type="text/javascript"> 


function on birth change(thisid) { 

var level = 3; 

Var birth = document .getElementById (thisid) .value; 

Var arrBirth = birth.split('-'); 

Var birthYear = arrBirth[0]; 

var birthMonth = arrBirth[1]; 

Var now = new Date(); 

Var nowYear = now.getFullYear (); 

Var nowMonth = now.getMonth() + 1; 

if ((nowYear - birthYear) > 60) { 
level = 1; 
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47 } else if ((nowYear - birthYear) == 60) { 
48 If (nowMonth >= birthMonth) 
49 level = 1; 
50 else 
51 level = 2; 
与 人 } else if ((nowYear - birthYear) > 45 && (nowYear - birthYear) < 60) { 
33 level = 2; 
54 } else if ((nowYear - birthYear) == 45) { 
与 有 if(nowMonth >= birthMonth) 
56 level = 2; 
3 else 
58 level = 3; 
59 } else { 
60 level = 3; 
61 
62 document .getElementById("id-hidden-level") .value = level; 
63 } 
64 </script> 
65 </html> 


关于 【代码 2-12】 的 说 明 : 
@ 第 14~33 行 代码 定义 了 一 个 表单 ， 其 中 action 属性 定义 了 表单 提交 的 服务 器 端 地 址 (PHP 


文件 )。 

第 24 行 代码 定义 了 一 个 日 期 类 型 的 文本 框 ,用 于 输入 用 户 出 生年 月 ; 同时 ,还 定义 了 onchange 
事件 处 理 方法 (on_birth_change() )， 当 用 户 选 择 好 日 期 (日 期 数据 发 生 改 变 ) 后 会 被 触发 。 
第 25 行 代 码 定 义 了 一 个 隐藏 文本 框 控 件 (<input type="hidden"/> ), 用 于 保存 根据 用 户 出 生年 
月 计算 得 出 的 年 龄 等 级 ( 具体 内 容 见 下 面 的 js 代码 )。 

第 36~ 63 行 代码 是 “on _birth change0” 方 法 的 实现 ， 具 体 就 是 根据 第 24 行 代码 用 户 选择 的 
出 生年 月 信息 和 当前 的 年 月 信息 计算 出 用 户 的 年 龄 ; 如 果 年 龄 大 于 60 岁 ( 含 60 岁 ) 则 自动 
分 配 下 铺 ( 通 过 定义 level=1 实现 )， 如 果 年 龄 年 龄 介 于 45 ~ 60 岁 之 间 则 自动 分 配 中 铺 ( 通 过 
定义 level=2 实现 )， 而 如 果 年 龄 小 于 45 岁 则 自动 分 配 上 铺 (通过 定义 level=3 实现 ); 第 62 
行 代码 则 将 level 等 级 数值 保存 在 第 25 行 代 码 定义 的 隐藏 文本 框 中 (相当 于 保存 在 全 局 变量 
中 )。 表 单 在 提交 到 服务 器 端 后 ,服务 器 端 PHP 文件 会 根据 第 25 行 代 码 定义 的 隐藏 文本 框 控 
件 中 储存 的 level 数值 获取 到 用 户 的 年 龄 等 级 并 自动 分 配 卧 铺 铺位 。 


下 面 使 用 Chrome 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 2.13 所 示 。 
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尊敬 的 King 用 户 , 系统 为 您 分 瑟 了 下 铺 . 
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图 2.13 JavaScript 使 用 隐藏 控件 的 方法 


2.13 简单 的 数字 及 字符 操作 


在 日 常 的 程序 中 ， 经 常会 涉及 数值 与 字符 的 操作 ， 例 如 将 一 些 英文 标题 转换 为 大 写 、 将 字符 


型 转换 为 数值 型 等 。 本 节 介绍 一 些 简单 的 处 理 方法 ， 读 者 可 以 拿 来 即 用 。 


【代码 2-13】( 详 见 源 代码 目录 ch02-js-simple-num-char.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 

06 </head> 

07 <script type="text/javascript"> 

08 window.onload = function () { 

09 getLowerCase = function (str，type) {// 小 写 转 大 写 

10 type = type 1| "locale";// 是 否 采取 本 地 转换 格式 

浊 主 return type === "locale" && str.toLocaleUpperCase() || 
str.toUpperCase (); 

12 1 

13 getNumbers = function (s) {// 字 符 型 转换 成 数值 型 

14 var n = parseInt(s，10) ;// 获 取 转 换 值 

5 if (isNaN (n) ) return 0;// 如 果 为 NaN 则 转换 结果 为 0 

16 return n; 

3 ]} 

8 getString = function (n) { // 数 字 转 换 成 字符 型 


19 return n.toString() 7 


30 | JavaScript+Vue+React 全 程 实例 
20 
ph console.1og(getLowerCase ("ASDsssss2asdA")); // 小 写 转 大 写 
22 /* 以 下 是 字符 转换 数字 */ 
23 console.1og (getNumbers ("ASDsssss2asdA")); 
24 console.1og (getNumbers ("123123ASDsssss2asdA")); 
25 console.log (getNumbers ("ASDsssss2asdA123")); 
26 /* 以 下 是 数字 转换 成 字符 型 */ 
27 console.1og(getString(123123) + "类 型 : " + typeof getString(123123) ) ， 
28 console.1log (getString (234324) + "类 型 : " + typeof getString(234324) ) ; 
29 }; 
30 </script> 
31 <body> 
32 <!-- 添加 文档 主体 内 容 --> 
33 <header> 
34 <nav>JavaScript 控制 表单 - 简单 的 数字 及 字符 操作 </nav> 
35 </header> 
36 <hr> 
37 </body> 
38 </html> 


关于 【代码 2-13】 的 说 明 : 
本 例 一 共 介绍 了 3 个 处 理 函 数 : 小 写 转 大 写 、 字 符 转 数字 、 数 字 转 字符 。 
第 09~12 行 代码 是 小 写 转 大 写 ， 首 先 会 检测 type 参数 ， 然 后 根据 参数 来 选择 相应 的 内 置 函数 。 
第 13 ~ 17 行 代码 是 将 字符 转换 成 数字 ,调用 JavaScript 脚本 语言 中 的 parseInt() 函 数 进行 转换 ， 
当 被 转换 值 为 NaN 时 返回 值 为 0。 
第 18 ~ 20 行 代码 是 将 数字 转换 成 字符 ,调用 JavaScript 脚本 语言 中 的 toString() 函 数 进行 转换 。 
第 21~ 28 行 代码 分 别 对 小 写 转 大 写 、 字 符 转 数 字 、 数 字 转 字符 这 3 个 函数 方法 进行 了 测试 。 


下 面 使 用 FireFox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 2.14 所 示 。 


僵 开发 者 工具 - JavaScript 全 程 实例 - http://localhost:.…。 一 口 x 
民 口 查 看 器 。 加] 控制 台 ” 口 调 试 器 。【 】 样 式 编辑 器 » 日 
会 ”时 过 济 输 出 口 持续 日 志 
ASDSSSSS2ASDA “simple-num-char .html :32:9 
日 simple-num-char.html:35:9 
123123 -Simple-num-char.htm1:36:9 
人 “simple-num-char .html :37:9 
123123 类 型 : string -simple-num-char.html:48:9 
234324 类 型 : string -simple-num-char.html;41;9 
>| 


2.14 。 JavaScript 简单 的 数字 及 字符 操作 
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2.14 ”高 亮 显示 表单 中 的 焦点 控件 


在 某 些 设计 场景 下 ， 需 要 将 表单 中 的 焦点 控件 进行 高 亮 显示 。 下 面 就 介绍 一 个 通过 JavaScript 


实现 高 


亮 显示 表单 中 焦点 控件 的 代码 实例 。 


【代码 2-14】( 详 见 源 代码 目录 ch02-js-focus-ele-highl 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
hs 
2 
3 
14 
215 
16 
17 


18 
| 
20 
2 


22 
卫 3 
24 
25 


26 
27 
28 
之 9 
30 
3 


<!doctype html> 
<html lang="en"> 
<head> 


<!-- 添加 文档 头 部 内 容 --> 
<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 控制 表单 - 高 亮 显示 表单 中 的 焦点 控件 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 


<form name="formHighlight" method="get"> 


<table> 
< 
<th>First Name: </th> 
<td><input type="text" id="id-fname" onfocus="highlight (this.id);" 
value="King"/></td> 
/EE 
te 
<th>Last Name: </th> 
<td><input type="text" id="id-lname" onfocus="highlight (this.id);" 
value="Wang"/></td> 
/E> 
<t E> 
<th></th> 
<td><input type="button" id="id-btn-focus-ele" onfocus= 
"highlight (this.id);"” value=" 高 亮 显示 焦点 控件 "/></td> 
</tr> 
</table> 
</form> 
</body> 
<script type="text/javascript"> 


function highlight (thisid) { 


32 | JavaScript+Vue+React 全 程 实例 
32 var frmEle = formHighlight .elements; 
33 Var eleFocus = document .activeElement; 
34 for (var i=0; i<frmEle.length; i++) { 
35 if(frmEle[i].id == eleFocus.id) { 
26 console.log (frmEle[il] .id); 
37 console.1l1og(eleFocus .id) 
38 document .getElementById (thisid) .style.border = 
"2px solid #666"; 
39 document .getElementById (thisid) .style.fontWeight = "bold"; 
40 document .getElementById (thisid) .style.color = "#fff"; 
41 document .getElementById (thisid) .style.backgroundColor = 
"#888"™; 
42 } else { 
43 console.log(frmEle[i] .id); 
44 console.log (eleFocus.id); 
45 document .getElementById (frmEle[i].id).style.border = ""; 
46 document .getElementById(frmElel[i] .id).style.fontWeight = ""; 
47 document .getElementById (frmEle[i]l.id) .style.color = ""; 
48 document .getElementById(frmEle[i].id). 
style.backgroundColor = 
49 } 
50 
5 } 
52 </script> 
53 </html> 


关于 【代码 2-14】 的 说 明 : 


@ 第 13~28 行 代码 定义 了 一 个 表单 ， 其 中 定义 了 一 组 文本 框 和 一 个 按钮 控件 ; 同时 ， 为 这 些 表 
单 控件 定义 了 onfocus 事件 处 理 方法 (highlight() )。 
@ 第 31~51 行 代码 是 highlight() 方 法 的 实现 ， 具 体 就 是 使 用 前 面 实例 中 介绍 过 的 activeElement 


属性 获取 当前 焦点 控件 ， 然 后 为 其 添加 高 亮 显示 的 CSS 样式 代码 。 
下 面 使 用 FireFox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 2.15 所 示 。 


First Name: 
Last Name: 


rr Name: king First Name: King 
Last me wand Lest Nome: Wang 
高 亮 旦 示 焦点 控件 高 亮 显示 焦点 控件 高 亮 显示 焦点 控件 


示 的 样式 。 


图 2.15 


高 亮 显示 表单 中 的 焦点 控件 
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2.15 ”动态 添加 、 删 除 下 拉 菜 单 选项 


在 实际 的 网 站 运营 中 很 多 数据 都 是 动态 变化 的 ， 比 如 一 些 下 拉 菜 单 的 选项 ， 此 时 就 需要 利用 
JavaScript 来 动态 地 添加 或 删除 选项 了 。 其 实 ， 所谓 的 动态 添加 或 删除 下 拉 菜 单 的 选项 ， 实 际 上 就 
是 动态 地 操作 DOM 对 象 .JavaScript 提供 了 为 下 拉 菜 单 执行 添加 选项 和 删除 选项 的 API 一 一 add0 
方法 和 remove() 方 法 。 


【代码 2-15】( 详 见 源 代码 目录 ch02-js-select-add-del.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 
04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 表单 - 动态 添加 、 删 除 下 拉 菜 单 选项 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <form name="formSelectAddRemove" method="get"> 


14 <table> 

15 <caption></caption> 

16 以 

了 7 <th rowspan="1" colspan="1"></th> 

18 <td rowspan="1" colspan="3"> 

二 和 <fieldset> 

20 <legend> 添 加 选项 </legend> 

2 <table> 

了 2 <tr> 

23 <th rowspan="1" colspan="1">Value:</th> 

24 <td rowspan="1" colspan="1"> 

bd <input type="text" class="input-sel" name="optValue" 
id="id-optValue"/> 

26 </td> 

27 </tr> 

28 <tr> 

29 <th rowspan="1" colspan="1">Text:</th> 

30 <td rowspan="1" colspan="1"> 


cl <input type="text" class="input-sel" name="optText" 


34 | JavaScript+Vue+React 全 程 实例 
id="id-optText"/></td> 
32 </tr> 
23 <tr> 
34 <th></th> 
25 <td rowspan= ei 
36 <input type= id-input-add-opt" 
value=" 添 加 选项 " 
3 onclick="on add opt click(this.id);"/> 
</td> 
38 </tr> 
39 </table> 
40 </fieldset> 
41 </td> 
42 </tr> 
43 <tr> 
44 <th rowspan="1" "1">Hobby:</th> 
45 <td rowspan="1" colspan="1"> 
46 <select name="selHobby" id="id-selHobby"> 
47 <option value=""> 请 选择 . . .</option> 
48 <option value="sport" selected="selected">Sport</option> 
49 <option value="reading">Reading</option> 
50 <option value="tour">Tour</option> 
5 </select> 
52 </td> 
53 <th></th> 
54 <td rowspan="1" colspan="1"> 
55 <input type="button" i id-input-remove-opt" 
value=" 删 除 选项 " 
56 onclick="on remove opt click(this.id);"/> 
57 </td> 
58 </tr> 
59 </table> 
60 </form> 
61 </body> 
62 <script type="text/javascript"> 
63 i 
64 * remove option 
65 * @param thisid 
66 人 
67 function on remove opt click(thisid) { 
68 Var selHobby = document .getElementById("id-selHobby"); 
69 selHobby .remove (selHobby.selectedIndex); 
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3 
了 人 * add option 
了 3 * @param thisid 
74 区 
7 function on add opt click(thisid) { 
76 Var selHobby = document .getElementById("id-selHobby"); 
yh Var option = document .createElement ("option"); 
78 option.value = document .getElementById("id-optValue") .value; 
79 option.text = document .getElementById("id-optText") .value; 
80 selHobby.add (option, null); 
81 } 
82 </script> 
83 </html> 


关于 【代码 2-15】 的 说 明 : 

@ 第 46~51 行 代码 定义 了 一 个 下 拉 菜 单 ， 并 初始 化 了 几 个 选项 ; 然后 动态 添加 和 删除 选项 的 操 
作 都 是 基于 这 个 下 拉 菜 单 来 操作 的 。 

e@ 第 55 ~ 56 行 代码 定义 了 一 个 按钮 控件 ， 并 定义 了 onclick 单 击 事件 方法 
( on_remove_opt_click() )， 用 于 执行 删除 选项 的 操作 。 第 67 ~ 70 行 代码 是 事件 方法 
(on_remove_opt_click() ) 的 具体 实现 ， 第 69 行 代码 通过 remove() 方 法 删除 指定 的 选项 
(selectedIndex )。 

@ 第 36 ~ 37 行 代码 定义 了 另 一 个 按钮 控件 ， 并 定义 了 onclick 单 击 事件 方法 
( on_add_opt_click() )， 用 于 执行 添加 选项 的 操作 。 第 75 ~ 81 行 代码 是 事件 方法 
(on_add_opt_click() ) 的 具体 实现 ， 第 78 ~ 79 行 代码 获取 了 用 户 输入 的 选项 信息 (value 值 

和 text 文 本 )， 第 80 行 代码 通过 add() 方 法 添加 刚刚 定义 的 选项 。 


下 面 使 用 FireFox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 2.16 和 图 2.17 所 示 。 


ET 
一 | 本 
贺 javascript 全 在 实 网 x lb 辐 | 国 hvasaipt 全 EE 安 全 x Ee BB| 
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JavaScript 控制 表单 - 动态 添加 、 珊 除 下 拉 荣 单 选项 JavaScript 控制 表单 - 动态 添加 、 删 除 下 拉 蔷 单 选 而 
添加 选项 一 添加 选项 
Value: music Value: musc 
Text: Music Text: Musc 
添加 选项 
Hobby:[5port ”~| | 到 内 这 大 
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Reading Reading 
Tour Tour 


2.16 JavaScript 动态 添加 下 拉 菜 单 选项 
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文件 四 锭 各 四 下 W 历 史 回 和 全 回 工具 中 和 是 口 。 X | 文件 四 半日 坦 帮 W 历史 书 和 图 工具 四 和 十 口 xX 
园 Javascript 全 生 实 例 x | 证 贺 ,javascript 全 在 实例 x ee 


GC | © localhost63 E> 


CG © loclhost63 跟 会 | 鸭 
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JavaScript 控制 表单 - 动态 添加 、 删 除 下 拉 菜单 选项 JavaScript 控制 表单 - 动态 添加 、 删 除 下 拉 茉 单 选项 


Hobby: 


图 2.17 JavaScript 动态 删除 下 拉 菜 单 选项 


第 3 章 JavaScript 控制 DOM 


本 章 介 绍 如 何 通过 JavaScript 来 控制 HTML DOM。DOM 是 HTML 网 页 的 标准 模型 和 编程 接 
口 ， 是 网 页 开发 中 重要 的 基础 核心 。 


3.1 JavaScript 与 HTML DOM 


DOM (Document Object Model, 文档 对 象 模型 ) 是 W3C 组 织 推荐 的 处 理 可 扩展 标志 语言 的 标 
准 编程 接口 。 在 HTML 网 页 中 ， 页 面 的 全 部 对 象 被 组 织 成 一 个 树 形 结构 ， 而 这 个 结构 模型 也 就 是 
所 谓 的 HTML DOM。 

HTML DOM 是 W3C 组 织 推出 的 标准 对 象 模型 和 标准 编程 接口 , 其 定义 了 所 有 HTML 元 素 的 
对 象 和 属性 ， 以 及 访问 它们 的 方法 。 也 就 是 说 ，HTML DOM 是 关于 如 何 操作 (获取 、 添 加、 修改 
或 删除 ) HTML 元 素 对 象 的 标准 。 

相信 读者 都 听 说 过 HTML 网 页 有 静态 页 面 和 动态 页 面 之 分 。 如 果 一 个 网 页 中 仅仅 是 由 各 种 
HTML 标签 元 素 组 合 而 成 ， 那 么 一 般 称 之 为 静态 页 面 。 如 果 在 一 个 网 页 中 使 用 了 JavaScript 脚本 代 
码 ， 就 可 以 称 之 为 动态 页 面 了 。JavaScript 就 是 通过 操作 HTML DOM 对 象 模型 实现 了 对 HTML 页 
面 中 的 元 素 、 属 性 、 样 式 和 事件 的 控制 ， 从 而 构建 出 HTML 动态 页 面 。 

HTML DOM 定义 了 一 个 Document 对 象 〈 每 一 个 载 入 浏览 器 的 HTML 文档 都 会 生成 一 个 
Document 对 象 ) ,通过 该 对 象 可 以 使 用 JavaScript 脚本 语言 对 HTML 页 面 中 的 元 素 对 象 进行 访问 。 
下 面 给 出 一 个 常用 的 、 通 过 元 素 对 象 的 id 属性 和 name 属性 获取 对 该 元 素 对 象 引用 的 代码 实例 。 


/** 

* 通过 id 属性 和 name 属性 获取 对 象 

流光 

document .getElementById (id) // TODO: 通过 id 获取 对 象 
document .getElementsByName (name) // TODO: 通过 name 获取 对 象 


3.2 通过 id 获取 网 页 中 的 元 素 对 象 


HTML DOM 定义 了 一 个 getElementById() 方 法 , 专门 用 于 获取 对 拥有 指定 id 的 元 素 对 象 集合 中 
的 第 1 个 元 素 对 象 的 引用 。 下 面 介 绍 一 个 JavaScript 通过 id 属性 获取 对 元 素 对 象 引用 的 代码 实例 。 
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【代码 3-2】( 详 见 源 代 码 目录 ch03jjs-get-id.html 文件 ) 


01 <!doctype html> 

02 <htm1l lang="en"> 

03 <head> 

04 ”<!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 

08 ”<!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 DOM - 通过 id 获取 网 页 中 的 元 素 对 象 </nav> 
11 </header> 

12 ”<!-- 添加 文档 主体 内 容 --> 


3 <p>First Name: <input type="text" name="fname" i 


"id-fname" /></p> 

14 <p>Last Name: <input type="text" name="lname" id="id-lname" /></p> 

5 <input type="button" id="id-get-id" onclick="on get id();" 
value=" 通 过 id 获取 " /> 

16 <div> 


by <span id="id-span-1">Full Name :é&nbsp;é&nbsp;</span><br> 
18 <span id="id-span-2">Full Name :&nbsp;é&nbsp;</span><br> 
19 <span id="id-span-3">Full Name :&nbsp;é&nbsp;</span><br> 
20 </div> 

21 </body> 


22 <script type="text/javascript"> 
23 function on get id() { 


24 Var id fname = document .getElementById("id-fname"); 

2 var id lname = document .getElementById("id-lname"); 

26 var full name = id fname.value + " " + id lname.value; 

27 for (var i=1; i<=3; i++) 

28 document .getElementById("id-span-" + i).innerText += full name; 
29 } 

30 </script> 

31 </html> 


关于 【代码 3-2】 的 说 明 : 

@ 第 13~14 行 代码 通过 标签 <input> 定 义 一 组 文本 框 (分 别 定义 了 id 属性 )， 用 于 输入 姓名 。 

@ 第 17~ 19 行 代码 通过 标签 <span> 定 义 了 一 组 行内 元 素 (分 别 定义 了 有 一 定 规则 的 id 属性 )， 
用 于 显示 从 第 13 ~ 14 行 代码 中 定义 的 文本 框 中 获取 姓名 。 

e@ 第 27~28 行 代码 通过 一 个 for 语句 循环 调用 getElementById() 方 法 ， 依 次 将 姓名 信息 显示 在 
第 17~ 19 行 代码 定义 的 <span> 行 内 标签 元 素 中 。 这 里 特别 需要 留意 的 是 ，getElementById() 
方法 中 id 参数 是 根据 自 变量 i 的 取 值 来 生成 的 。 
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下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 3.1 所 示 。 
文件 日 篇 纺 日 坦 看 W 历史 书签 国 工 ROD 帮助 四 口 x 
x | 士 国 
”CGI | © localhost:633 器 … 合 |» 三 


JavaScript 全 程 实例 


JavaScript 控制 DOM - 通过 id 获取 网 页 中 的 元 素 对 象 


First Name: |king 


Last Name: 


图 3.1 JavaScript 通过 id 获取 网 页 中 的 元 素 对 象 


3.3 通过 name 获取 网 页 中 的 复 选 框 


HTML DOM 还 定义 了 一 个 getElementsByName() 方 法 , 专门 用 于 获取 对 拥有 指定 name 的 全 前 
元 素 对 象 集合 的 引用 。 下 面 介绍 一 个 JavaScript 通过 name 属性 获取 复 选 框 《Checkbox) 对 象 集合 
引用 的 代码 实例 。 


【代码 3-3】( 详 见 源 代 码 目录 ch03jjs-get-checkbox.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 DOM - 通过 name 获取 网 页 中 的 复 选 框 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <p>Hobby: <br> 


40 | Javascript+Vue+React 全 程 实例 
14 <input type="checkbox" name="hobby" value="sport" checked />Sport 
15 <input type="checkbox" name="hobby" value="reading"/>Reading 
16 <input type="checkbox" name="hobby" value="tour" checked />Tour 
下 了 <input type="checkbox" name="hobby" value="music"/>Musicg 
18 <input type="checkbox" name="hobby" value="movie" checked />Movie 
19 <input type="checkbox" hobby" dance"/>Dance 
20 </p> 
21 <p> 
2 <input type="button" onclick="on get checkbox();"” value=" 获 取 全 部 "/> 
23 <input type="button" onclick="on get checkbox checked();" 
value=" 获 取 全 部 选中 项 "/> 
24 <input type="button" onclick="on get checkbox unchecked();" 
value=" 获 取 全 部 非 选中 项 "/> 
257 </p> 
26 </body> 
27 <script type="text/javascript"> 
28 Www 
29 * Func - Get all Checkbox 
30 a 
31 function on get checkbox() { 
3 var cb = document .getElementsByName ("hobby"); 
gg console.log("Checkbox --- "); 
34 cb.forEach (function (item) { 
35 console.log("value : " + item.value + ", text : "+ 
item.nextSibling.nodeValue); 
36 ]) 7 
六 太 } 
38 Yd: 
39 * Func - Get all checked Checkbox 
40 天光 
41 function on_get_checkbox_checked() { 
42 Var cb = document .getElementsByName ("hobby"); 
43 console.log("checked Checkbox --- ") 7 
44 cb .forEach (function (item) { 
45 if (item.checked) 
46 console.log("value : " + item.value + ", text : "+ 
item.nextSibling.nodeValue); 
47 3 
48 } 
49 六 
50 * Func - Get all unchecked Checkbox 
51 Sw 
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function on get checkbox unchecked() { 
var cb = document .getElementsByName ("hobby"); 
console.log("unchecked Checkbox --- "); 
cb.forEach (function (item) { 
if (!item.checked) 
console.log("value : " + item.value + ", text : 
item.nextSibling.nodeValue); 
En 
, 
</script> 
</html> 


+ 


关于 【代码 3-3】 的 说 明 : 
@ 第 14~19 行 代码 通过 标签 <input> 定 义 一 组 复 选 框 (定义 了 相同 的 name 属性 )， 表 明 是 一 个 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 3.2 和 图 3.3 所 示 。 


分 组 的 复 选 框 。 


第 32 行 代码 通过 name 属性 获取 了 全 部 复 选 框 的 对 象 集合 , 第 36 ~38 行 代码 通过 forEach 选 


代 语 名 遍历 了 全 部 复 选 框 ， 并 通过 浏览 器 控制 台 输 出 了 复 选 框 的 value 属性 值 。 


第 45 行 和 第 56 行 代码 分 别 通过 判断 复 选 框 的 checked 属性 来 筛选 当前 复 选 框 是 否 被 选中 ， 


然后 通过 浏览 器 控制 台 输出 了 复 选 框 的 value 属性 值 。 


文件 昌 ”编辑 昌 ”查看 VW) 历史 G 书签 B) 工具 四 ”帮助 (H) 一 口 
贺 ,javascript 全 程 实例 x eR 
CQ | © localhost:63342/js-total-samples/d 器 … 会 »》 三 
JavaScript 控制 DOM - 通过 name 获 取 网 页 中 的 复 选 框 
Hobby: 
MSport DReading MTour DMusic MMovie DDance 
获取 全 部 。 ”获取 全 部 选中 项 。 获取 全 部 非 选中 项 
民 口 坦 看 器 。 加 控制 台 。 口 亩 坛 器 {] 样式 编 绢 器 @ 八 能 » 国 … x 
会 时 过 尘 答 出 持续 日 志 
Checkbox --- che3-js-get-checkbox.html:42:9 
value : sport, text : Sport che3-js-get-checkbox.html:44:13 
value : reading, text : Reading che3-js-get-checkbox.html:44:13 
value : tour, text : Tour che3-jis-get-checkbox.html:44:13 
value : music, text : Music che3-js-get-checkbox.html :44:13 
value : movie, text : Movie che3-js-get-checkbox.html:44:13 
value : dance, text : Dance ch85-js-get-checkbox.html:44:13 
>| 


3.2 JavaScript 通过 name 属性 获取 网 页 中 的 全 部 复 选 框 


42 | JavaScript+Vue+React 全 程 实例 


文件 日 ”第 各 旧 ”查看 WW 历史 (9) 书签 四 工具 中 帮助 (由 一 口 x 
园 Javascript 全 入 安 例 x lt B | 


CQ | @ localhost:63342/js-total-samples/d 器 … 个 | 为 三 


Javascript 控制 DOM - 通过 name 获 取 网 页 中 的 复 选 框 


Hobby: 
MSport Reading MTour DMusic MMovie Dance 


获取 全 部 “[ 获取 全 部 选中 项 | | 获取 全 部 非 选 中 项 
民品 查看 器 。 回 控制 全 口 调 t 晤 {] 术 (篇 坟 叶 CGI 长 能 » 上 日 …X 


疹 “时 过 灌输 出 持续 日 志 
checked Checkbox --- che3-js-get-checkbox.html :53:9 
value : sport, text : Sport che3-js-get-checkbox.html:56:17 
value : tour, text : Tour che3-js-get-checkbox.html :56:17 
Value : movie, text : Movie che3-js-get-checkbox.html ;56:17 


图 3.3 JavaScript 通过 name 属性 获取 网 页 中 全 部 选中 的 复 选 框 


3.4 通过 标签 名 获取 网 页 中 的 多 个 文本 


除了 前 面 介绍 的 通过 标签 元 素 的 id 属性 和 name 属性 获取 对 象 引 用 ，HTML DOM 还 定义 了 一 
个 getElementsByTagName() 方 法 ， 专 门 用 于 获取 对 拥有 指定 标签 名 的 全 部 元 素 对 象 集合 的 引用 。 
下 面 介绍 一 个 JavaScript 通过 标签 名 获取 网 页 中 多 个 文本 的 代码 实例 。 


【代码 3-4】( 详 见 源 代 码 目录 ch03-js-get-tag.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 DOM - 通过 标签 名 获取 网 页 中 的 多 个 文本 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <p>First Name: <input type="text" name="fname" id="id-fname"/></p> 

14 <p>Last Name: <input type="text" name="lname" id="id-lname"/></p> 

15 <input type="button" onclick="on get tag text();" value=" 获 取 (text) 文本 "/> 
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17 
18 
19 
20 
21 
22 
23 
24 
区 
26 
2 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 


<input type="button" onclick="on get tag button();" 
value=" 获 取 (button) 文 本 "/> 
</body> 
<script type="text/javascript"> 
/** 
* Func - get input[type=text] 
ed 
function on get tag text() { 
var inputs = document .getElementsByTagName ("input"); 
console.log("input [type=text] --- "); 
for (varri = "0; 1 < inputs. length; 14+) { 
if (inputs[i] .type == "text") 
console.log("value : " + inputs[i] .value); 
} 
} 
/** 
* Func - get input[type=button] 
BX 
function on get tag button() { 
Var inputs = document .getElementsByTagName ("input"); 
console.log("input [type=button] --- "); 
for (var i = 0; i < inputs.length; i++) { 
if (inputs[i].type == "button") 
console.log("value : " + inputs[i].value); 
3 
省 
</script> 
</html> 


关于 【代码 3-4】 的 说 明 : 


@ 第 13~14 行 代码 通过 标签 <input type="text"> 定 义 一 组 文本 框 ， 第 15 ~ 16 行 代码 通过 标签 
<input type="button"> 定 义 另 一 组 按钮 控件 ， 而 且 这 两 组 均 是 通过 <input> 标 签 来 定义 的 。 


第 23 行 代码 通过 标签 名 获取 了 全 部 <input> 标 签 元 素 的 对 象 集合 。 第 25 ~ 28 行 代码 通过 for 


循环 语句 遍历 了 全 部 <input> 标 签 元 素 。 其中， 第 26 行 代码 通过 判断 type 属性 值 (text ) 来 得 


选集 合 中 的 文本 框 类 型 ， 并 通过 浏览 器 控制 台 输出 了 文本 框 的 value 属性 值 。 
第 37 行 代码 通过 判断 type 属性 值 ( button ) 未 筛选 集合 中 的 按钮 控件 类 型 ， 


制 台 输 出 了 按钮 控件 的 value 属性 值 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 3.4 所 示 。 


并 通过 浏览 器 控 
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国 Javascript 全 县 = 全 x jw 


CG © localhost63 


JavaScript 控制 DOM - 通过 标签 名 获取 网 页 中 的 多 个 文本 


First Name: King 
Last Name: Wang 


i 


[3 日 … x 


会 “时 过 尖 纺 出 口 # 沪 日 志 
input[type=text] --- che3-js-get-tag.htm:33:9 
value : King che3-js-get-tag.html:36:17 
value : Wang che3-js-get-tag.html:36: 
input[type=button] --- che3-js-get-tag.html:44:9 
value ; 获取 (text) 文 本 che3-js-get-tag.html:47:17 
value : 菊 取 (button) 文 本 che3-js-get-tag.html:47:17 


3.4 JavaScript 通过 标签 名 获取 网 页 中 的 多 个 文本 


3.5 遍历 网 页 元 素 的 全 部 属性 


HTML DOM 为 标签 元 素 定义 了 一 个 attributes 属性 , 用 于 返回 指定 标签 元 素 的 属性 集合 。 借 助 
attributes 属性 ，JavaScript 通过 一 个 循环 语句 就 可 以 实现 遍历 标签 元 素 全 部 属性 的 操作 了 。 


【代码 3-5】( 详 见 源 代码 目录 ch03jjs-get-attributes.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 DOM - 遍历 网 页 元 素 的 全 部 属性 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <p>Name: <input type="text" class="css" name="name" id="id-name" 

value="King"/></p> 

14 <input type="button" id="id-get-attr" onclick="on get attr();" 
value=" 获 取 标 签 的 全 部 属性 "/> 

15 </body> 
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<script type="text/javascript"> 
/* 
* Func - get attributes 
5 
function on get attr() { 
Var name = document .getElementById("id-name"); 
Var attrs = name.attributes; 
console.log("input name's all attributes --- "); 
for (var i = 0; i < attrs.length; i++) { 
console.log("attr name : " + attrs[i].name + ", value : "+ 
attrs [i] .value); 
} 
E 
</script> 
</html> 


关于 【代码 3-5】 的 说 明 : 


@ 第 13 行 代码 通过 标签 <inpuf> 定 义 一 个 文本 框 ， 为 了 测试 attributes 属性 的 使 用 ， 特 意 定义 了 


type、class、name、id (id="id-name" ) 和 value 这 5 个 属性 。 


@ 第 21 行 代 码 通过 id 属性 获取 了 文本 框 (id="id-name" ) 对 象 。 
@ 第 22 行 代码 通过 attributes 属性 获取 了 该 文本 框 全 部 属性 的 集合 (attrs )。 
@ 第 24~26 行 代码 通过 for 循环 语句 遍历 了 属性 集合 (attrs )。 其 中 ， 第 25 行 代码 通过 浏览 器 


控制 台 输 出 了 文本 框 各 个 属性 的 名 称 (name ) 和 属性 值 (value )。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 3.5 所 示 。 


文件 旧 ” 妨 名 四 ”查看 历史 书签 @ 工具 中 帮助 中) = 
园 ,avascript 全 入 全 bb 回 


CG © Iloalhost6 


js-total-samples/ 


JavaScript 控制 DOM - 遍历 网 页 元 素 的 全 部 属性 


Name: IKing 
忆 口 坦 和 器 。 器 控制 关口 涯 工 器 {) 样式 疙 各 器 @ 人 长 能 » 日 … x 
会 “时 过 沪 和 出 口 持 雪 8B 志 
input name's all attributes --- che3-js-get-attributes.html:32:9 
attr name : class, value : css ch83-js-get-attributes.html: 


attr name : name，value : name che3-is-get-attributes. ht 
attr name : id, value : id-name che3-js-get-attributes. ht 
attr name : value, value : King che3-js-get-attributes.html; 


attr name : type, value : text che3-js-get-attributes.html:34:13 


图 3.5 JavaScript 遍历 网 页 元 素 的 全 部 属性 
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3.6 动态 创建 网 页 新 文本 段落 


HTML DOM 定义 了 一 个 createElement() 方 法 ， 可 以 用 于 创建 各 种 元 素 节点 ， 同 时 该 方法 返回 
一 个 元 素 对 象 。 在 新 的 元 素 节点 创建 好 后 ， 再 通过 appendChild() 方 法 或 insertBefore() 方 法 插入 元 素 
节点 ， 就 可 以 实现 动态 创建 网 页 元 素 的 功能 了 。 

下 面 介绍 一 个 很 常用 的 JavaScript 动态 创建 新 的 文本 段落 〈<p> 标 签 元 素 ) 的 代码 实例 。 


【代码 3-6】( 详 见 源 代码 目录 ch03jjs-createElement-p.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 ”<!-- 添加 文档 头 部 内 容 --> 

05 ”<title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 

08 ”<!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 DOM - 动态 创建 网 页 新 文本 段落 </nav> 
3 </header> 

12 ”<!-- 添加 文档 主体 内 容 --> 


13 <div id="id-divl" class="css-p"></div> 

14 <div id="id-div2" class="css-p"> 

15 <p> 已 经 存在 的 文本 段落 .</p> 

16 </div> 

Ey <div id="id-div3" class="css-p"> 

18 <p> 第 一 段 文本 段落 .</p> 

19 <p> 第 三 段 文本 段落 .</p> 

20 </div> 

21 <input type="button" onclick="on createEle p_new();" 


value=" 动 态 创建 文本 段落 " /> 

22 <input type="button" onclick="on createEle p append();" 
value=" 动 态 追 加 文本 段落 ” /> 

23 <input type="button" onclick="on createEle p_insert();" 
value=" 动 态 插入 文本 段落 ” /> 

24 </body> 

25 <script type="text/javascript"> 

26 function on createEle p new() { 

27 var id divl = document .getElementById("id-div1"); 
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28 Var pl = document.createElement ("p"); 

29 P1.innerText = "动态 创建 的 文本 段落 ."; 

30 id divl.appendChild (pl1); 

3 下 未 

32 function on createEle p append() { 

33 var id div2 = document .getElementById("id-div2"); 
34 Var p2 2 = document .createElement ("p"); 

35 P2_2.innerText = "动态 追加 (appendchild) 的 文本 段落 ."; 
36 id div2.appendChild(p2 2); 

37 } 

38 function on createEle p insert() { 

39 var id div3 = document .getElementById("id-div3"); 
40 var child p = id div3.children; 

41 var p3 1 = child p[0]; 

42 var p3 3 = child pl[1]; 

43 Var p3 2 = document.createElement ("p"); 

44 p3_2.innerText = "动态 插入 (insertAfter) 的 文本 段落 ."; 
45 id div3.insertBefore(p3 2, p3 3); 

46 } 

47 </script> 


48 </html> 


关于 【代码 3-6】 的 说 明 : 

@ 第 13 行 、 第 14~16 行 和 第 17~20 行 代码 分 别 通过 标签 <div> 定 义 3 个 层 对 象 ， 在 每 个 层 中 
分 别 加 入 了 不 同 数量 的 段落 标签 <p>， 目 的 是 为 了 分 别 实现 动态 创建 、 追 加 和 插入 文本 段落 
的 功能 。 

@ 第 26~31 行 代码 定义 的 函数 实现 了 动态 创建 文本 段落 的 操作 ; 第 28 ~ 29 行 代码 通过 
createElement() 方 法 创建 了 一 个 段落 <p> 对 象 (pl )， 并 通过 innerText 属性 定义 了 文本 内 容 ; 
第 30 行 代 码 通过 appendChild() 方 法 将 新 创建 的 文本 段落 (p1 ) 对 象 动态 插入 到 第 13 行 代码 
定义 的 标签 <div> 中 。 

@ 第 32~37 行 代码 定义 的 函数 实现 了 动态 追加 文本 段落 的 操作 。 注 意 ，appendChild() 方 法 会 将 
新 对 象 自动 插入 同 级 兄弟 对 象 的 最 后 位 置 。 

@ 第 38~46 行 代码 定义 的 函数 实现 了 动态 插入 文本 段落 的 操作 。 注 意 ， 该 操作 是 通过 
insertBefore() 方 法 实现 的 ， 因 为 appendChild() 方 法 是 无 法 实现 将 新 对 象 插入 到 同 级 兄弟 对 象 
之 间 的 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 3.6 所 示 。 
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文件 四 ” 策 吉 旧 ”可 看 历史 (书签 @@) 工具 中 帮助 0 。 ”Xx || 文件 昌 ”篇 雪 旧 ”查看 WW 历史 G 书签 B， 工 具 四 _ 帮 动员。 义 
国 ,javascript 全 得 实例 x 车 国 | 国 /avascipt 全 入 安全 x | 十 B | 
CG © Ilocalhost6 踩 … 个 | 为 | 三 > CG © localhost 器 … 个 | 尺 | 三 
JavaScript 控制 DOM - 动态 创建 网 页 新 文本 段落 JavaScript 控制 DOM - 动态 创建 网 页 新 文本 段落 
动态 创建 的 文本 段落 
已 经 存在 的 文本 段落 . 
已 经 存在 的 文本 段落 . 
第 一 段 文本 段落 | 


| 动态 追加 (appendChild) 的 文本 段落 . 
第 三 段 文 本 段落 . 2 一 | 
动态 创建 文本 段落 动态 插入 文本 段落 第 一 段 文本 段落 . 


TO 
初始 页 面 操作 后 的 页 面 第 三 段 文本 段落 . 


3.6 JavaScript 动态 创建 网 页 新 文本 段落 


3.7 动态 删除 网 页 文本 段落 


在 3.6 节 中 介绍 了 动态 创建 新 文本 段落 的 方法 ， 本 节 将 介绍 动态 删除 文本 段落 的 方法 。HTML 
DOM 对 象 定义 了 一 组 remove0 方 法 和 removeChild() 方 法 ， 可 以 用 于 动态 删除 各 种 元 素 节点 。 

下 面 给 出 一 个 JavaScript 通过 remove() 方 法 和 removeChild() 动 态 删除 文本 段落 (<p> 标 签 元 素 ) 
的 代码 实例 。 


【代码 3-7】( 详 见 源 代 码 目录 ch03-jjs-remove-p.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 DOM - 动态 删除 网 页 文本 段落 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-divl" class="css-p"> 

14 <p> 动 态 创建 的 文本 段落 .</p> 

15 </div> 

16 <div id="id-div2" class="css-p"> 
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a 
18 
19 
20 
之 
22 
23 
24 
25 
26 


Sh 


28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 


<Pp> 已 经 存在 的 文本 段落 .</P> 
<p> 动 态 追 加 (appendchild) 的 文本 段落 .</p> 
</div> 
<div id="id-div3" class="css-p"> 
<p> 第 一 段 文本 段落 .</p> 
<p> 动 态 插入 (insertAfter) 的 文本 段落 .</p> 
<p> 第 三 段 文本 段落 .</p> 
</div> 
<input type="button" onclick="on removeChild _p() ;"” value=" 动 态 删除 文本 段落 "/> 
<input type="button" onclick="on remove p();" 
value=" 动 态 删除 (remove) 文本 段落 "/> 
<input type="button" onclick="on removeChild all p();" 
value=" 动 态 删 除 全 部 文本 段落 "/> 
</body> 
<script type="text/javascript"> 
function on removeChild p() { 
var id divl = document .getElementById("id-div1"); 
var child p = id divl.childNodes; 
id divl.removeChild(child p[0]); 
. 
function on remove p() { 
var id div2 = document .getElementById("id-div2"); 
var child p = id div2.childNodes; 
id div2.remove (child p); 
} 
function on removeChild all P() { 
document .getElementById("id-div3"); 
id div3.childNodes; 
for (var 1 = child p.length = 1; 1 >= 07 i~=) { 
id div3.removeChild(child pl[il]); 


var id div3 


var child p 


’ 
</script> 
</html> 


关于 【代码 3-7】 的 说 明 : 
@ 第 13~24 行 代码 分 别 通过 标签 <div> 定 义 3 个 层 对 象 ， 并 通过 手动 方式 定义 多 个 文本 段落 ， 


最 终 显示 成 如 图 3.6 中 操作 后 的 页 面 效果 ( 大 致 方向 就 是 将 图 3.6 中 的 效果 进行 逆向 操作 )。 
第 30~34 行 代码 定义 的 函 数 实现 了 动态 删除 文本 段落 的 操作 。 其 中 ， 第 32 行 代码 通过 
childNodes 属性 获取 了 第 一 个 层 (<div id="id-div1" ) 中 的 全 部 段落 <p> 节 点 的 集合 (child_p )， 
第 33 行 代码 通过 removeChild() 方 法 删除 了 该 文本 段落 。 注 意 ， 删 除 时 必须 使 用 数组 下 标的 
方式 (child_p[0] )， 而 直接 删除 集合 (child_p) 对 象 是 无 效 的 。 
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@ 那么 能 不 能 直接 删除 集合 (child_p ) 对 象 呢 ? 第 35~39 行 代码 定义 的 函数 实现 了 直接 删除 集 
合 (child p) 对 象 的 操作 ， 不 过 这 里 要 使 用 remove() 方 法 来 操作 。 

@ 第 40~46 行 代码 定义 的 函数 演示 了 常规 删除 多 个 文本 段落 的 操作 ， 主 要 就 是 通过 for 循环 语 
向 依次 调用 removeChild0 方 法 来 删除 每 一 个 文本 段落 。 这 里 要 特别 注意 的 是 ，for 循环 语句 
迭代 的 方式 从 大 到 小 ， 因 为 如 果 迁 代 顺序 是 从 小 到 大 ， 那 么 每 次 删除 操作 后 集合 (child_p ) 
对 象 的 数组 下 标 就 会 发 生 改 变 ， 从 而 导致 删除 操作 无 法 完成 。 


3.8 动态 蔡 换 段落 的 文本 内 容 


前 面 两 节 分 别 介绍 了 动态 创建 和 删除 文本 段落 的 方法 ， 本 节 再 介绍 一 下 如 何 动态 蔡 换 文本 内 
容 的 方法 。 动 态 蔡 换文 本 内 容 主 要 是 通过 innerText 属性 或 innerHTML 属性 来 实现 的 。 其 中 ， 
innerText 属性 主要 用 来 操作 纯 文 本 ; innerHTML 属性 既 可 以 用 来 操作 文本 , 也 可 以 用 来 操作 HTML 
代码 。 

下 面 给 出 一 个 JavaScript 通 过 innerText 属性 和 innerHTML 属性 动态 蔡 换 文本 内 容 的 代码 实例 。 


【代码 3-8】( 详 见 源 代码 目录 ch03jjs-replace-p.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 DOM - 动态 蔡 换 段 落 的 文本 内 容 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div" class="css-p"> 

14 <p> 文 本 段落 的 原始 内 容 .</p> 

15 <p> 文 本 段落 的 原始 内 容 .</p> 

16 </div> 

17 <input type="button" id="id-replace-p" onclick="on replace p();" 
value=" 动 态 蔡 换文 本 内 容 "/> 

18 </body> 

19 <script type="text/javascript"> 

20 function on replace p() { 


2 var id p = document.getElementsBYTagName ("p"); 
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id p[0] .innerText = "文本 段落 动态 替换 的 内 容 ."7 

23 id _p[1] .innerHTML = "<b> 文 本 段落 动态 蔡 换 的 内 容 .</b>"7 
24 } 

25 </script> 

26 </html> 


关于 【代码 3-8】 的 说 明 : 


@ 第 22 行 代码 通过 使 用 innerText 属性 动态 替换 了 第 14 行 代码 中 定义 的 段落 中 的 文本 内 容 。 
® 第 23 行 代码 通过 使 用 innerHTML 属性 动态 替换 了 第 15 行 代码 中 定义 的 段落 中 的 文本 内 容 。 
注意 ， 这 里 在 使 用 innerHTML 属性 时 加 入 了 HTML 代码 ( <b> ) 实现 字体 加 粗 的 效果 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 3.7 所 示 。 


贺 Javascript 全程 实例 | 国 ,vascript 全 各 实例 


> CG © localhost633 回合 少 € 3 © | © localhost633 


Javascript 控制 DOM - 动态 车 换 段 落 的 文本 内 容 


图 3.7 JavaScript 动态 蔡 换 段落 的 文本 内 容 


3.9 如 何 主动 触发 按钮 单 击 事件 


众所周知 ， 页 面 中 设计 的 按钮 控件 是 为 了 让 用 户 单 击 来 触发 操作 的 ， 那 么 能 不 能 直接 通过 
JavaScript 脚本 语言 从 后 台 主 动 触发 按钮 来 操作 呢 ? 答案 是 肯定 的 。 
下 面 实现 一 个 JavaScript 主动 触发 按钮 单 击 事件 的 代码 实例 。 


【代码 3-9】( 详 见 源 代码 目录 ch03-js-btn-click.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 ”<!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 
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08 ”<!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 DOM - 主动 触发 按钮 单 击 事件 </nav> 

1 </header> 

12 ”<!-- 添加 文档 主体 内 容 --> 

3 <p>First Name: <input type="text" name="fname" id="id-fname" 
value="King" /></p> 

14 <p>Last Name: <input type="text" name="lname" id="id-lname" 
value="Wang" /></p> 

15 <input type="button"” id="id-btn-name" value=" 用 户 触发 按钮 " /> 

16 <input type="button" id="id-btn-click" value=" 主 动 触发 按钮 " /> 

17 </body> 

18 <script type="text/javascript"> 

19 Var Vv btn name = document .getElementById("id-btn-name"); 

20 V_btn_name .onclick = function () { 

ph Var id fname = document .getElementById("id-fname"); 

pe var id lname = document .getElementById("id-lname"); 

23 Var full name = id fname.value + " " + id lname.value; 

24 console.log("Full Name : " + full name); 

25 }; 

26 var v_btn click = document .getElementById("id-btn-click"); 

2 Vv btn click.onclick = function () { 

28 console.1o0g ("主动 触发 按钮 : "); 

29 document .getElementById("id-btn-name") .click(); 

30 3 

31 </script> 

32 </html> 


关于 【代码 3-9】 的 说 明 : 

@ 第 15 行 代码 通过 标签 <inpuf> 定 义 了 第 一 个 按钮 控件 ; 第 20 ~25 行 代码 为 该 按钮 控件 添加 了 
onclick 事件 ， 获 取 了 第 13 ~ 14 行 代码 定义 的 文本 框 中 的 内 容 。 注 意 ， 该 按钮 的 单 击 事件 是 
必须 由 用 户 执行 触发 操作 来 完成 的 。 

@ 第 16 行 代码 通过 标签 <inpuf> 定 义 了 第 二 个 按钮 控件 ; 第 27 ~30 行 代码 为 该 按钮 控件 添加 了 
onclick 事件 ,其 中 第 29 行 代码 通过 为 第 一 个 按钮 控件 执行 click() 方 法 来 执行 单 击 操作 .注意 ， 
这 里 第 一 个 按钮 控件 的 单 击 操作 是 JavaScript 主动 触发 的 ， 而 不 是 由 用 户 被 动 触发 的 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 3.8 和 图 3.9 所 示 。 
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园 ,evascript 全 程 实例 一 国 Javascript 全 得 实例 


GC | © Ilocalhost63- Y » SE FC © loclhosté 


JavaScript 控制 DOM - 主动 触发 按钮 单 击 事件 


First Name: king First Name: king 


Last Name: Wang Last Name: Wang 


民 已 Inspector 六 console 口 Debugger » “x 

回 Console DoDebugger » 站 "x 器 

有 阁 呈 Fiteroutg 加 Persist Logs 
主动 艇 发 按钮 : che3-js-btn-click.html:37:9 
Full Name : King Wang Che3-js-btn-click.html:33;9 


加 Persist Logs 


che3-js-btn-click.html:33:9 


图 3.8 JavaScript 用 户 触发 按钮 单 击 事件 3.9 JavaScript 主动 触发 按钮 单 击 事件 


3.10 ”动态 修改 元 素 属性 值 


在 前 面 的 章节 中 介绍 了 如 何人 遍历 元 素 的 全 部 属性 ， 本 节 将 在 此 基础 上 介绍 如 何 动态 修改 元 素 
的 属性 值 。 下 面 实现 一 个 JavaScript 动态 修改 元 素 属性 值 的 代码 实例 。 


【代码 3-10】( 详 见 源 代码 目录 ch03-js-modify-attributes.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 

06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 DOM - 动态 修改 元 素 属性 值 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <p>Modify Attributes: 

14 <input type="text" class="css" name="name" id="id-name" value="King"/> 

15 </p> 

16 <input type="button" onclick="on get attr();"” value=" 获 取 标签 的 全 部 属性 "/> 

17 <input type="button" onclick="on modify attr();" 
value=" 修 改 标签 的 全 部 属性 "/> 

18 </body> 


54 JavaScript+Vue+React 全 程 实例 


19 <script type="text/javascript"> 


20 function on modify attr() { 

21 var input = document .getElementsByTagName ("input"); 

玫 交 Var attrs = input[0] .attributes; 

人 2 console.log("modify input's all attributes --- "); 

24 Var new attrs = ["password", "newCSS", "pwd", "id-pwd", "123456"]; 
2 for (var i = 0; i < attrs.length; i++) { 

26 attrs[i] .value = new attrs[il]; 

Ey } 

28 for(var j = 0; j < attrs.length; j++) { 

29 console.log("attr name : " + attrs[j] .name + ", value : "+ 


attrs[j] .value); 


30 } 
Eh } 

32 </seript> 
33 </html> 


关于 【代码 3-10】 的 说 明 : 

@ 第 14 行 代码 通过 标签 <inpuf> 定 义 了 一 个 文本 框 ， 并 定义 了 type="text" 、class="Css" 、 
name="name"、id="id-name" 和 value="King" 这 几 个 属性 。 

e 第 16 行 和 第 17 行 代 码 分 别 定义 了 两 个 按钮 控件 : 第 一 个 按钮 控件 用 于 获取 文本 框 (在 第 14 
行 代码 中 定义 ) 的 全 部 原始 属性 ， 第 二 个 按钮 控件 用 于 动态 修改 该 文本 框 的 全 部 属性 。 

@ 第 20~31 行 代码 定义 的 函数 实现 了 动态 修改 文本 框 全 部 属性 的 操作 。 其 中 ， 第 24 行 代码 定 
义 的 数组 包括 了 全 部 新 的 属性 值 ， 比 较 有 意思 的 是 将 文本 框 类 型 (type="text" ) 修改 为 了 密 
码 框 类 型 (type="password" )。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 3.10 所 示 。 


贺 ,avascript 全 得 实例 国 ,mvascript 全 和 实例 
CG © loclhost6334 “加 个 | CG © loalhost6334 


JavaScript 控制 DOM - 动态 修改 元 素 属性 值 


Modify Attributes: king 


@ 吕 Inspector\ EConsole DDebugger » 加 … x 品 Inspector 加 Console DD Debugger » 

会 时 Filer output 固 Persisttogs 图 言 fiter output Persist Logs 
print input's all attributes --- -modify-attributes.htal:35:9 aodify input's al attributes ---  _-modify-attributes.htnl:46:9 
attr mane : type, valve + text modify-attributes.htal:37:13 attr nane : type, Value + password nodify-attributes,htnl:s2:13 
attr nane ; class, Value : css -aodify-attributeshtml:37:13 attr nane + class, value : newss nodify-attributes.htnl:s2:13 
attr nane : nane, valve : name nodify-attributes.htal:37:13 attr name : nase, valve : prd odify-attributes. htal:s2:13 
attr mane : id, value : id-nane ec_nodify-attributes.htal:37:13 attr nane : 14, value : 1d-pud nodify-attributes. htal:s2:13 
ttr name : value, value : King ec_nodify-attributes.htal:37:13 attr nane : value, value : 123456 nodify-attributes.htal:s2:13 


图 3.10 JavaScript 动态 修改 元 素 属性 值 
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3.11 ”如何 获 取 下 拉 列 表 的 选项 


一 般 来 讲 ， 获 取 下 拉 列 表 的 选项 主要 是 通过 selectIndex 属性 来 操作 的 ， 其 实 还 有 一 个 index 索 
引 属性 也 可 以 实现 该 操作 。 本 节 就 分 别 介绍 如 何 通过 这 两 个 属性 来 获取 下 拉 列 表 的 选项 (包括 获取 
索引 和 文本 值 ) 。 

首先 ， 介 绍 一 个 JavaScript 通过 selectIndex 属性 获取 下 拉 列 表 选 项 的 代码 实例 。 


【代码 3-11】( 详 见 源 代码 目录 ch03-js-select-selectlndex.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 ”<!-- 添加 文档 头 部 内 容 --> 

05 ”<title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 

08 ”<!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 DOM - 获取 下 拉 列 表 的 选项 (selectIndex) </nav> 
a </header> 

12 ”<!-- 添加 文档 主体 内 容 --> 

13 <p>Lang: gnbsp; gnbsp; 


14 <select id="id-select-lang"> 
15 <option>CH</option> 

16 <option>EN</option> 
<option>FR</option> 

18 <option>GE</option> 

19 <option>RU</option> 

20 <option>HK</option> 

2 </select> 

2 </p> 


23 <input type="button" onclick="on get selIndex();" 


value=" 获 取 下 拉 列 表 选 项 索引 ” /> 


24 </body> 

25 <script type="text/javascript"> 

26 function on get selIndex() { 

之 了 var i = document .getElementById("id-select-lang") .selectedIndex; 
28 var 0 = document .getElementByYyId("id-select-lang") .options[i]; 

29 console.log("select indexz : "+i+"."+" select text : "+o.text); 


30 } 
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31 </script> 
32 </html> 


关于 【代码 3-11】 的 说 明 : 

@ 第 14~ 21 行 代码 通过 标签 <select> 定 义 了 一 个 下 拉 菜 单 ， 并 添加 了 一 组 选项 。 

@ 第 26~30 行 代码 定义 的 函数 实现 了 通过 selectIndex 属性 操作 下 拉 菜 单 选 项 的 功能 。 其 中 ， 
第 27 行 代码 通过 selectIndex 属性 获取 了 下 拉 菜 单 选项 的 索引 ,第 28 行 代码 通过 集合 options 
对 象 获取 了 索引 值 对 应 的 下 拉 菜 单 选项 , 第 29 行 代码 通过 text 属性 在 浏览 器 控制 台中 输出 了 
下 拉 菜 单 选 项 的 文本 内 容 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 3.11 所 示 。 


€ DF CC | © Iocalhost6334: 


JavaScript 控制 DOM - 获取 下 拉 列 表 的 选项 
(selectIndex) 


Lang: EN ~ 


民品 nspector 回 Console D Debugger » “x 


闪 时 Fiteroutput 回 persist Logs 
Select index : @. select text : CH select-selectIndex.htnl:38:9 
Select index : 1. Select text : EN select-selectindex.htnl:38:9 


图 3.11 JavaScript 获取 下 拉 列 表 的 选项 (selectIndex) 
下 面 ， 再 介绍 一 个 JavaScript 通过 index 属性 获取 下 拉 列 表 选 项 的 代码 实例 。 


【代码 3-12】( 详 见 源 代码 目录 ch03-js-select-index.html 文件 ) 


01 <script type="text/javascript"> 


02 function on get sel index() { 

03 Var i = document .getElementById("id-select-lang") .selectedIndex; 
04 Var options = document .getElementsByTagName ("option"); 

05 console.log("select index : " + options[i].index + "." 十 


" select text : " + options[i].text); 
06 二 
07 </script> 


关于 【代码 3-12】 的 说 明 : 
@ ”本 代码 是 在 【代码 3-11) 的 基础 上 修改 而 成 的 ， 主要 区 别 就 是 在 第 05 行 代码 中 使 用 index 属 
性 获取 了 下 拉 菜 单 选 项 的 索引 值 。 
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读者 可 以 自行 测试 一 下 该 代码 实例 ， 与 【代码 3-11】 的 效果 是 完全 一 致 的 。 
3.12 ”实现 电话 拨号 键盘 


前 面 简单 介绍 了 如 何 使 用 下 拉 菜 单 选项 的 index 属性 ， 其 实 index 属性 还 可 以 用 于 控制 同 级 的 
多 个 同类 控件 ， 比 如 常见 的 按钮 控件 。 对 于 同 级 的 多 个 按钮 控件 ， 可 以 用 index 属性 作为 按钮 的 索 
引 ， 以 区 分 多 个 同 级 按钮 。 

下 面 给 出 一 个 通过 使 用 多 个 同 级 按钮 控件 并 借助 index 属性 实现 电话 拨号 键盘 的 JavaScript 代 
码 实例 。 


【代码 3-13】( 详 见 源 代码 目录 ch03-js-btn-telphone.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 DOM - 实现 电话 拨号 键盘 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div class="css-div-button"> 


14 <button>1</button> 

15 <button>2</button> 

16 <button>3</button><br> 
7 <button>4</button> 

18 <button>5</button> 

19 <button>6</button><br> 
20 <button>7</button> 

2 <button>8</button> 

22 <button>9</button><br> 
23 <button>*</button> 

24 <button>0</button> 

25 <button>#</button><br> 
26 <input type="text" id="id-input-tel" readonly /> 
27 </div> 

28 </body> 


29 <script type="text/javascript"> 
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window.onload = function () { 


var arrTel = ["l"，"2"，"3"，"4"，"5"，"6"，"7T"，"8" 


mwOm，"#"] 7 


Var arrBtn = document .getElementsByTagName ('button'); 


Var tel = document .getElementById("id-input-tel"); 
for (var i = 0; i < arrBtn.length; i++) { 
arrBtn[i]l.index = i; 
arrBtn[il] .onclick = function () { 
tel.value += arrTel [this.index]; 
] 
}; 
</script> 
</html> 


关于 【代码 3-13】 的 说 明 : 


@ 第 14~25 行 代码 通过 一 组 <button> 按 钮 控件 实现 了 一 个 电话 拨号 键盘 ( 包括 0~9 数 字 键 、“*” 


下 面 使 用 Firefox 浏览 器 运行 测试 该 


键 和 #” 键 )。 

第 26 行 代码 定义 了 一 个 文本 框 (只 读 )， 用 于 显示 电话 号 码 。 

第 31 行 代码 定义 了 一 个 数组 ， 包 含 了 电话 拨号 键盘 的 数字 和 字符 。 
第 32 行 代码 获取 了 全 部 <burron> 按 钮 控件 的 对 象 集合 (arrBtn )。 


第 34~ 39 行 代码 通过 for 循环 语句 遍历 了 全 部 按钮 控件 的 对 象 集合 (arrBtn )。 其 中 ， 第 35 
行 代码 为 每 一 个 按钮 对 象 的 index 属性 定义 了 索引 值 ( 自 变 量 i); 第 36~38 行 代码 为 每 一 个 
按钮 对 象 定义 了 onclick 事件 处 理 方法 ， 用 于 将 用 户 的 拨号 操作 显示 在 第 26 行 代码 定义 的 只 


读 文本 框 中 。 
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3.12 JavaScript 实现 电话 拨号 键盘 


HTML 网 页 ， 具 体 效果 如 图 3.12 所 示 。 


第 4 章 按钮 特效 


本 章 介 绍 如 何 通过 JavaScript 来 实现 各 种 按钮 特效 ， 通 过 这 些 特效 来 丰富 HTML 文档 的 设计 
手段 和 页 面 效果 。 


4.1 按钮 概述 


HTML 语法 规范 中 定义 ， 可 以 使 用 <input type="buttonlsubmitreset"> 标 签 来 定义 按钮 〈 按 钮 | 提 
交 | 重 置 ) ， 或 者 直接 使 用 <button> 标 签 可 以 定义 按钮 ， 目 前 几乎 所 有 的 主流 浏览 器 均 支 持 这 两 种 定 
义 方式 。 

在 具体 应 用 时 ， 这 两 种 定义 方式 还 是 略 有 区 别 的 。<input type="buttonlsubmitlreset"> 标 签 的 浏 
览 器 兼容 性 比 <button> 标 签 更 好 一 些 ，<button> 标 签 在 下 浏览 器 和 非 IE 浏览 器 中 会 有 所 区 别 〈 当 
然 现在 绝 大 部 分 用 户 都 没 在 使 用 正 浏览 器 了 ) 。 

当然 任何 事情 都 是 有 利 有 弊 的 , <button> 标 签 相 对 于 <input type="buttonlsubmitreset"> 标 签 提供 
了 更 为 强大 的 功能 和 更 丰富 的 内 容 。 在 <button></button> 标 签 之 间 ， 设 计 人 员 可 以 放置 文本 、 图 像 
和 多 媒体 等 内 容 ， 这 点 是 <input type="buttonlsubmitreset"> 标 签 所 不 具备 的 功能 。 

HTML 语法 规范 为 按钮 对 象 定 义 了 一 组 事件 方法 (比如 : 单 击 事件 和 焦点 事件 ), 通过 JavaScript 
脚本 语言 可 以 对 这 些 事件 进行 编程 控制 ， 实 现 更 为 强大 的 页 面 功能 。 同 时 ， 通 过 JavaScript 脚本 语 
言 还 可 以 控制 按钮 的 CSS 样式 代码 ， 进 而 展现 出 更 为 丰富 的 页 面 特 效 。 


4.2 为 按钮 添加 背景 颜色 


在 HTML DOM 对 象 中 ， 定 义 有 一 个 Style 对 象 ， 用 于 表示 风格 样式 ， 绝 大 多 数 的 页 面 元 素 均 
可 以 通过 该 对 象 来 定义 风格 样式 。 在 Style 对 象 中 ， 定 义 了 一 个 backgroundColor 属性 ， 表 示 元 素 
的 背景 颜色 。 如 果 将 backgroundColor 属性 应 用 于 按钮 <button> 元 素 ， 就 可 以 为 按钮 控件 添加 各 种 
背景 颜色 了 。 

下 面 简单 介绍 一 个 JavaScript 通过 backgroundColor 属性 为 按钮 控件 添加 背景 颜色 的 代码 实例 。 


【代码 4-1】( 详 见 源 代 码 目录 ch04-jjs-btn-backgroundColor.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 ”<!-- 添加 文档 头 部 内 容 --> 
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05 <title>JavaScript 全 程 实例 </title> 
06 </head> 
07 <body> 
08 ”<!-- 添加 文档 主体 内 容 --> 
09 <header> 
10 <nav>JavaScript 按钮 特效 - 为 按钮 添加 背景 颜色 </nav> 
uh </header> 
12 ”<!-- 添加 文档 主体 内 容 --> 
3 <div class="css-div-button"> 
14 <button>Red</button> 
15 <button>Yellow</button> 
16 <button>Blue</button> 
</div> 
18 </body> 
19 <script type="text/javascript"> 
20 var colorBtn = ["red", "yellow", "blue"]; 
PE Var arrBtn = document .getElementsByTagName ("button"); 
22 for (var i=0; i<arrBtn.length; i++) { 
2 和 arrBtn[i].style.backgroundColor = colorBtn[i]; 
24 } 


25 </script> 
26 </html> 


关于 【代码 4-1】 的 说 明 : 


二 
. 
四 
. 


第 14 ~ 16 行 代码 通 过 <button> 标 签 定义 一 组 按钮 ， 后 面 将 为 这 组 按钮 定义 不 同 的 背景 颜色 。 

第 20 行 代 码 定义 了 一 个 数组 (colorBtn )， 分 别 定义 了 3 种 颜色 ("red"，"yellow" 和 "blue" )。 

第 21 行 代码 获取 了 按钮 对 象 集合 (arrBtn )。 

第 22 ~ 24 行 代码 通过 一 个 for 语句 依次 为 按钮 对 象 (arrBtn[i] ) 定义 背景 颜色 (colorBtn[i] )， 
具体 就 是 通过 Style 对 象 的 backgroundColor 属性 来 操作 的 。 


由 于 书籍 印刷 的 原因 ， 这 里 就 不 给 出 页 面 效果 图 了 。 按 钮 控件 的 背景 颜色 效果 ， 读 者 可 以 自 
行 运行 源 代码 测试 查看 。 


4.3 不 同 按钮 提交 到 不 同 的 表单 地 址 


对 于 HTML DOM 对 象 中 的 表单 <form> 元 素 而 言 ， 一 个 表单 只 能 提交 到 一 个 由 action 属性 定 


义 的 服务 器 端 页 面 上 ， 因 为 action 


属性 就 只 能 定义 一 个 url 链接 地 址 。 那 么 能 不 能 通过 JavaScript 


实现 一 个 表单 提交 到 不 同 服务 器 端 地 址 页 面 上 去 呢 ? 答案 是 肯定 的 ,通过 在 表单 中 定义 多 个 按钮 就 
可 以 实现 提交 到 不 同 表单 地 址 的 功能 。 
下 面 就 介绍 一 个 通过 JavaScript 实现 不 同 按钮 提交 到 不 同 表单 地 址 的 代码 实例 。 
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【代码 4-2】( 详 见 源 代 btn-multiForm.html 文件 ) 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
本 
12 
3 


14 


3 


16 


Ey 


18 
19 
20 
演出 
22 
23 
24 
Pd 
26 
27 
28 
忌 9 
30 


<!doctype html> 
<html lang="en"> 
<head> 
<!-- 添加 文档 头 部 内 容 --> 
<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav> 不 同 按钮 提交 到 不 同 表单 地 址 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 


<form name="formMulti" method="get" enctype="multipart/form-data" 


action=""> 


<p>First Name: gnbsp; gnbsp;<input type="text" name="fname" 


value="King"/></p> 


<p>Last Name:gnbsp;é&nbsp;<input type="text" name="lname" 


value="Wang"/></p> 


<button type="submit" name="btnCh" onclick="submit ch();"> 


提交 (CH) </button> 


<button type="submit" name="btnEn" onclick="submit en();"> 


提交 (EN) </button> 
</form> 
</body> 
<script language="javascript"> 
function submit ch() { 
document .formMulti.action = "multiForm-ch.php"; 
document .formMulti.submit (); 
} 
function submit en() { 
document .formMulti.action = "multiForm-en.php"; 
document .formMulti.submit (); 
和 
</script> 
</html> 


关于 【代码 4-2】 的 说 明 : 


@ 第 13~18 行 代码 通过 <form> 标 签 定义 一 个 表单 ， 其 中 的 action 属性 没有 定义 具体 属性 值 。 
@ 第 16~17 行 代码 通过 <button type="submit"> 标 签 定义 了 两 个 按钮 控件 ， 并 分 别 定义 了 不 同 的 
onclick 事件 处 理 方法 ( submit_ch()、submit_en() )， 用 于 实现 提交 到 不 同 的 表单 地 址 的 操作 。 
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@ 第 21~24 行 代码 是 submit ch() 方 法 的 实现 过 程 ， 第 22 行 代码 通过 action 属性 定义 了 表单 提 
交 的 服务 器 端 PHP 页 面 (multiForm-ch.php )， 第 23 行 代码 通过 调用 submit() 方 法 实现 提交 表 
单 的 操作 。 

日 同样 的 ， 第 25 ~ 28 行 代码 是 submit en() 方 法 的 实现 过 程 ， 以 及 表单 提交 的 服务 器 端 PHP 页 
面 (multiForm-ch.php )。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 4.1 和 图 4.2 所 示 。 


localhost:9090/js-tota X 


CG © locl 


| Name : Wang King. 


不 同 按钮 提交 到 不 同 表单 地 址 


图 4.1 JavaScript 不 同 按钮 提交 到 不 同 的 表单 地 址 (一) 


如 图 4.1 所 示 ， 第 一 个 提交 按钮 将 表单 提交 到 服务 器 端 PHP 页 面 (multiForm-ch.php) ， 页 面 
中 显示 出 了 中 文 习惯 的 名 字 。 


[ee [cm ei 
JavaScript 全程 实例 。 xX 肥 s = localhost:9090/js-tota xX Ws 


€)> GO ll ”CE» 


不 同 按钮 提交 到 不 同 表单 地 址 


FistName ing 天 一 一 一 
Last Name: Wang 去 单 提交 地 址 : multiForm-en.php 


图 4.2 JavaScript 不 同 按钮 提交 到 不 同 的 表单 地 址 〈 二 ) 


如 图 4.2 所 示 ， 第 二 个 提交 按钮 将 表单 提交 到 服务 器 端 PHP 页 面 (multiForm-en.php) ， 页 面 
中 显示 出 了 英文 习惯 的 名 字 。 


4.4 避免 回 车 键 自动 提交 表单 


一 般 情 况 下 ， 如 果 在 一 个 表单 中 只 定义 了 一 个 submit 类 型 的 提交 按钮 ， 那 么 当 用 户 在 表单 输 
入 完 后 按 下 回 车 键 (Enter) 就 可 以 实现 表单 的 提交 操作 。 不 过 在 有 些 情况 下 ， 这 种 看 似 便捷 的 功 
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能 也 会 带 来 不 必要 的 烦恼 ， 那 就 是 如 果 用 户 进行 了 误 操作 (在 还 没有 输入 完 表单 的 情况 下 ,就 误 按 
车 键 提交 了 表单 ) 怎么 办 ? 这 个 时 候 就 需要 通过 JavaScript 来 禁用 回 车 键 (Enter) 功能 了 。 


加 


【代码 4-3】( 详 见 源 代码 目录 ch04-js-form-no-enterhtml 文件 ) 


01 <!doctype html> 
02 <htm1l lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 


09 <header> 

10 <nav> 避 免 回 车 键 自动 提交 表单 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <form name="formNoEnter" method="get" action="form-no-enter.php"> 


14 <p>First Name: <input type="text" name="fname" id="id-fname" 
value="King"/></p> 

15 <p>Last Name: <input type="text" name="lname" id="id-lname" 
value="Wang"/></p> 

16 <button type="submit" id="id-submit"> 提 交 表单 </button> 

17 </form> 

18 </body> 

19 <script type="text/javascript"> 

20 window.onload = function () { 

th document . formNoEnter .onkeypress = function (ev) { 

2 Var ev = window.event || ev; 

2 if (ev.keyCode == 13 || ev.which == 13) { 

24 console.log("Info : press enter no submit."); 

25 return false; 

26 } 

2 } 

28 } 

29 </script> 

30 </html> 


关于 【代码 4-3】 的 说 明 : 
@ 第 13~17 行 代码 通过 <form> 标 签 定义 一 个 表单 (formNoEnter )， 同 时 定义 了 action 属性 
(form-no-enter.php )。 其 中 ， 第 16 行 代码 通过 <button type="submit"> 标 签 定义 了 一 个 提交 按 
钮 ; 表单 中 如 果 定 义 了 该 submit 类 型 的 按钮 ， 如 果 不 对 回 车 键 ( Enter ) 进行 屏蔽 处 理 的 话 ， 
那么 当 用 户 按 下 回 车 键 后 ， 默 认 就 会 执行 提交 表单 的 操作 (读者 可 以 自行 测试 一 下 )。 
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@ 第 21~27 行 代码 为 表单 (formNoEnter ) 定义 了 按 下 按键 onkeypress 事件 处 理 方 法 。 其 中 ， 
第 23 行 代 码 通过 判断 回 车 键 ( Enter ) 按键 ASCII 编码 (13 ) 来 屏蔽 用 户 操作 ， 这 里 要 注意 
浏览 器 兼容 性 代码 的 写法 ; 如 果 判 断 结 果 为 “ 真 ", 就 在 浏览 器 控制 台中 输出 一 行 提示 信息 (第 
24 行 代码 )， 并 通过 返回 false 来 屏蔽 按键 操作 (第 25 行 代码 )。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 4.3 所 示 。 


下 一 
国 javascript 全 程 实例 


CC |Q© lolh 


First Name: King 


Last Name: Wang 


芭 全 Inspector 回 Console » 器 …x 
会 时 Fiteroutput 回 persist Logs 


Info : press enter no submit。_form-no-enter.html;33;17 


图 43 JavaScript 避免 回 车 键 自动 提交 表单 


如 图 4.3 中 箭头 所 示 ， 当 用 户 按 下 回 车 键 (Enter) 后 ， 表 单 提交 操作 没有 生效 ， 而 在 浏览 器 
控制 台中 显示 了 第 24 行 代码 定义 的 提示 信息 。 


4.5 按钮 在 单 击 后 自动 失效 


在 某 些 HTML 页 面 应 用 中 ， 可 能 需要 实现 按钮 在 单 击 一 次 后 就 自动 失效 的 效果 ， 通 过 设置 按 
钮 控件 的 disabled 属性 就 可 以 实现 该 功能 。 下 面 给 出 一 个 通过 JavaScript 实现 按钮 在 单 击 后 自动 失 
效 的 代码 实例 。 


【代码 4-4】( 详 见 源 代码 目录 ch04-js-btn-click-once.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 ”<!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 

08 ”<!-- 添加 文档 主体 内 容 --> 

09 <header> 
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10 <nav> 按 钮 在 单 击 后 自动 失效 </nav> 

3 </header> 

12 ”<!-- 添加 文档 主体 内 容 --> 

13 ”<div> 测 试 按钮 : 

14 <button id="id-click-once">Click Once</button> 
15 </div> 

16 ”<div> 重 新 激活 : 


by <button id="id-re-active">Re-Active</button> 

18 </div> 

19 </body> 

20 <script type="text/javascript"> 

妆 重 document .getElementById("id-click-once") .onclick = function (e) { 
22 e.target .disabled = true; 

23 }; 

24 document .getElementById("id-re-active") .onclick = function (e) { 
心包 document .getElementById("id-click-once") .disabled = false; 
26 }; 

27 </script> 

28 </html> 


关于 【代码 4-4】 的 说 明 : 

@ 第 14 行 和 第 17 行 代码 通过 <button> 标 签 分 别 定义 了 两 个 按钮 ， 第 一 个 按钮 
(id="id-click-once" ) 用 于 测试 在 单 击 后 自动 失效 的 功能 ， 第 二 个 按钮 ( id="id-re-active" ) 用 
于 重新 激活 第 一 个 按钮。 

@ 第 21~23 行 代码 为 第 一 个 按钮 定义 了 onclick 事件 处 理 方法 ， 其 中 第 22 行 代码 通过 设 定 
disabled 属性 (=true ) 让 该 按钮 失效 。 

@ 第 24~26 行 代码 为 第 二 个 按钮 定义 了 onclick 事件 处 理 方法 ， 其 中 第 25 行 代码 通过 设 定 
disabled 属性 (=false ) 让 第 一 个 按钮 重新 被 激活 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 4.4 所 示 。 


圆 ,mascrpt 全 x 


CG © ll 


按钮 在 单 击 后 自动 失效 按钮 在 单 击 后 自动 失效 


测 坏 按钮 过 组 :| Click Once 
于 新 激活 [Re-Actve | 


图 4.4 JavaScript 控制 按钮 在 单 击 后 自动 失效 


如 图 4.4 中 箭头 所 示 ， 当 用 户 按 下 第 一 个 按钮 〈Click Once) 后 ， 该 按钮 就 自动 失效 了 。 用 户 
可 以 通过 第 二 个 按钮 (Re-Active) 再 次 激活 第 一 个 按钮 。 
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4.6 为 删除 功能 按钮 添加 确认 提醒 


一 般 情 况 下 ， 删 除 操作 都 是 一 种 风险 比较 大 的 行为 ， 所 以 设计 人 员 一 般 都 会 为 删除 功能 添加 
上 一 个 再 次 确认 提醒 的 功能 。 在 HTML DOM 对 象 中 定义 有 一 个 Window〔 窗 体 ) 对 象 ， 该 对 象 中 
定义 了 一 个 confirm() 方 法 ， 用 于 显示 一 个 带 有 指定 消息 并 带 有 OK 按钮 及 取消 按钮 的 对 话 框 (一 
般 称 为 确认 对 话 框 》。 

下 面 介绍 一 个 JavaScript 通过 confirm() 方 法 为 删除 按钮 添加 确认 提醒 功能 的 代码 实例 。 


【代码 4-5】( 详 见 源 代 码 目录 ch04jjs-btn-confirm.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 ”<!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 

06 </head> 

07 <body> 

08 ”<!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 为 删除 功能 按钮 添加 确认 提醒 </nav> 
十 </header> 

12 ”<!-- 添加 文档 主体 内 容 --> 

ee <button id="id-btn-confirm"> 删 除 按钮 </button> 
14 ”<p> 删 除 按钮 --- 删除 内 容 </p> 

15 </body> 

16 <script type="text/javascript"> 


wh document .getElementById("id-btn-confirm") .onclick = function (e) { 
18 if(confirm("Please confirm to del ?")) { 

19 document .getElementsByTagName ("p") [0] .innerText = ""; 

20 } 

21 }; 

22 </script> 

23 </html> 


关于 【代码 4-5】 的 说 明 : 

”第 13 行 代码 通过 <button id="id-btn-confirm"> 标 签 定义 一 个 按钮 ， 用 于 删除 第 14 行 代码 定义 
的 <p> 标 签 中 的 内 容 。 

@ 第 17~21 行 代码 为 <button id="id-btn-confirm"> 标 签 定义 了 onclick 单 击 事件 处 理 方法 . 其 中 ， 
第 18 ~ 20 行 代码 通过 判断 调用 confirm() 方 法 的 返回 值 让 用 户 选 择 是 否 执行 删除 操作 。 
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下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 4.5 所 示 。 


Please confirm to del ? 


图 4.5 _ JavaScript 为 删除 功能 按钮 添加 确认 提醒 
如 图 4.5 中 箭头 所 示 ， 当 用 户 按 下 “删除 按钮 ”后 ， 页 面 中 会 先 弹出 一 个 确认 框 ， 然 后 根据 用 


户 的 选择 确认 是 否 删除 内 容 。 


4.7 ”根据 状态 展示 不 同样 式 按钮 


在 某 些 HTML 页 面 应 用 中 ， 设 计 人 员 需 要 根据 特定 状态 将 页 面 中 的 按钮 展示 出 不 同 的 风格 ， 


此 时 就 需要 通过 JavaScript 来 动态 改变 按钮 的 样式 。 下 面 给 出 一 个 通过 JavaScript 实现 根据 状态 展 
示 不 同样 式 按钮 的 代码 实例 。 


【代码 4-6】( 详 见 源 代码 目录 ch04-js-btn-status.html 文件 ) 


01 
02 
03 
04 
05 
06 
07 


<!doctype html> 
<html lang="en"> 
<head> 
<!-- 添加 文档 头 部 内 容 --> 
<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
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08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 根 据 状 态 展示 不 同样 式 按钮 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div css="css-btn-status"> 

14 <button id="id-btn-status" style="width:128px;height:32px"> 正 常 状态 
</button> 

5 <p> 当 前 的 状态 : </p> 

16 </div> 

17 <button id="id-btn-normal" onclick="on normal status() "> 正常 状态 </button> 

18 <button id="id-btn-running" onclick="on running_status() "> 运行 状态 
</button> 

19 <button id="id-btn-stop" onclick="on_stop_status () "> 停止 状态 </button> 

20 <button id="id-btn-disable" onclick="on disable_status()"> 禁 用 状态 
</button> 

21 </body> 

22 <script type="text/javascript"> 

2 Var curStatus = ""; 

24 function on normal status() { 

25 var V_btn = document .getElementById('id-btn-status'); 

26 v_ btn.disabled = false; // 恢 复 可 用 状态 

EE VvV_btn.innerText = "正常 状态 "7 

28 V_btn.style.color = " "7 

2 V_btn.style.fontWeight = ""; 

30 V_btn.style.backgroundColor = 

31 curStatus = "正常 状态 '7 // 设 置 正常 状态 显示 值 

32 var p = document .getElementsByTagName ("p") [0]; 

33 P.innerHTML = ' 当 前 的 状态 : ' + curstatus; 

34 } 

35 function on running status() { 

36 var V_btn = document .getElementById('id-btn-status'); 

32 v btn.disabled = false; // 恢 复 可 用 状态 

38 v_btn.innerText = "运行 状态 "; 

39 Vv_btn.style.color = "#fff"; 

40 V_btn.style.fontWeight = "bold"; 

41 V_btn.style.backgroundColor = "#666"; 

42 curStatus = ' 运 行 状 态 '; // 设 置 运行 状态 显示 值 

43 var P = document .getElementsByTagName ("p") [0]; 

44 p.innerHTML = ' 当 前 的 状态 : ' + curstatus; 

45 } 

46 function on stop_ status() { 

47 var Vv _ btn = document .getElementById('id-btn-status'); 
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48 v_btn.disabled = false; // 恢 复 可 用 状态 

49 vV_btn.innerText = "停止 状态 "; 

50 V_ btn.style.color = "#888"; 

51 V_btn.style.fontWeight = "bold"; 

5 Vv_btn.style.backgroundColor = "#ccc"; 

53 curStatus = "停止 状态 '7 // 设 置 停止 状态 显示 值 
54 Var P = document .getElementsByTagName ("p") [0]; 

号 5 P.innerHTML = ' 当 前 的 状态 : ' + curStatusy 

56 下 

ST function on disable status() { 

58 var V_btn = document .getElementById('id-btn-status'); 
59 v btn.disabled = true; // 设 置 不 可 用 为 true 

60 v_btn.innerText = "禁用 状态 "; 

61 V_btn.style.color = "#ccc"; 

62 V_btn.style.fontWeight = "normal"; 

63 V_btn.style.backgroundColor = "#eee"; 

64 curStatus = ' 禁 用 状态 '; // 设 置 不 可 用 状态 显示 值 
65 var P = document .getElementsByTagName ("p") [0]; 

66 P.innerHTML = ' 当 前 的 状态 : ' + curStatus;// 显 示 当 前 状态 
67 } 

68 </script> 

69 </html> 


关于 【代码 4-6】 的 说 明 : 


@ 第 14 行 代码 通过 <button id="id-btn-status"> 标 答 定 义 一 个 按钮 ， 用 于 演示 按钮 的 不 同 状 态 。 


@ 第 15 行 代码 定义 的 <p> 标 签 用 于 显示 按钮 当前 的 状态 。 


8 第 17~20 行 代码 通过 <button> 标 签 分 别 定义 了 4 个 按钮 ， 用 于 切换 第 14 行 代码 中 定义 的 


<button id="id-btn-status"> 按 钮 的 状态 。 


@ 第 24~34 行 、 第 35-~45 行 、 第 46~56 行 、 第 57~67 行 代码 分 别 定义 了 第 17 ~ 20 行 代码 中 
4 个 按钮 的 onclick 事件 处 理 方法 .其 中 ,使 用 disabled 属性 定义 按钮 是 否 被 禁用 ,使 用 innerText 
属性 定义 按钮 不 同 状态 下 的 显示 内 容 , 使 用 color、fontWeight 和 backgroundColor 属性 分 别 定 


义 按钮 不 同 状态 下 的 样式 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 4.6 所 示 。 


如 图 4.6 中 所 示 ，4 个 页 面 中 分 别 展示 了 按钮 的 4 种 状态 (正常 状态 、 运 行 状 态 、 停 止 状态 和 


禁用 状态 ) 。 
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[正常 状态 ] [ 运行 状态 | [ 停止 状态 | [ 共用 状态 ] 


国 Javascript 全 B= X 
> GO localt 


当前 的 状态 ; 停止 状态 
[正常 状 坟 ] [ 运行 状态 ] [停止 状态 ] [ 葵 用 状态 | | [正常 状态 ] [运行 状态 ] [停止 状态 ] [ 本 放 状态 ] 


图 4.6 JavaScript 根据 状态 展示 不 同样 式 按钮 


4.8 注册 按钮 倒计时 效果 


相信 大 多 数 读者 都 遇 到 过 下 面 的 场景 ， 用 户 注册 页 面 中 注册 按钮 是 带 有 倒计时 功能 的 ， 这 样 
用 户 就 必须 要 等 待 倒计时 完成 后 才能 操作 (好 意 提醒 一 下 用 户 再 次 核对 个 人 信息 是 否 准确 ) 。 那 么 ， 
这 个 功能 是 如 何 实现 的 呢 ? 还 是 利用 HTML DOM 对 象 中 定义 的 Window〔 窗 体 ) 对 象 。 该 对 象 中 
定义 了 一 个 setInterval0 方 法 ， 可 以 按照 指定 的 周期 (以 毫秒 计 ) 来 调用 函数 或 计算 表达 式 。 注 意 ， 
这 个 setInterval0) 方 法 会 不 停 地 循环 调用 函数 ， 直 到 使 用 clearInterval0 方 法 清除 计时 器 或 者 当前 窗 
口 被 关闭 后 才 会 停止 。 

下 面 就 介绍 一 个 JavaScript 通过 setInterval() 方 法 实现 具有 倒计时 效果 的 注册 按钮 的 代码 实例 。 


【代码 4-7】( 详 见 源 代 码 目录 ch04-js-btn-reg-timerhtml 文件 ) 


01 
02 
03 
04 
05 
06 
07 
08 
09 


<!doctype html> 

<html lang="en"> 

<head> 
<!-- 添加 文档 头 部 内 容 --> 
<title>JavaScript 全 程 实例 </title> 

</head> 

<body> 

<!-- 添加 文档 主体 内 容 --> 


<header> 
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10 
二 
be 
13 
14 
15 


16 
bh 
18 
9 
20 
本 
22 
23 
24 
25 
26 
2 
28 
29 
30 
Ee 
32 
33 
34 
35 
36 
37 
38 
39 


<nav> 注 册 按钮 倒计时 效果 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 


<div css="css-btn-timer"> 
<p> 
<button id="id-btn-reg-timer" style="width:150px; 
height :32px"> 注 册 (剩余 10 秒 ) </button> 
</p> 
</div> 
</body> 
<script type="text/javascript"> 


var btnRegTimer = null; // 定 时 器 
window.onload = function () { 
Var V_btn = document .getElementById("id-btn-reg-timer"); 
Vv btn.disabled = true; 
v_btn.innerText = "注册 (剩余 10 秒 ) "; 
window.clearInterval (btnRegTimer);  // 取 消 定 时 器 
var btnRegSec = 10; // 开 始 10 秒 倒计时 
btnRegTimer = window.setInterval (function () { 
if (btnRegSec == 0) { 
VvV_btn.disabled = false; 
VvV_btn.innerText = "注册 "; 
window.clearInterval (btnRegTimer); ”// 取 消 定时 器 
} else { 
btnRegSec--; // 让 倒计时 秒 数 自 减 
V_btn.innerText = "注册 (剩余 " + btnRegSec + " 秒 ) "; 
} 
}, 1000); 
Fx 
</script> 
</html> 


关于 【代码 4-7】 的 说 明 : 
@ 第 15 行 代码 通过 <button id="id-btn-reg-timer"> 标 签 定义 一 个 按钮 ， 用 于 演示 注册 按钮 具有 个 


计时 效果 。 

第 20 行 代 码 定义 并 初始 化 了 一 个 空 的 计时 器 (btnRegTimer= null)。 

第 21~37 行 代码 定义 了 Window 对 象 的 onload 事件 处 理 方法 。 其中， 第 26 行 代码 定义 了 一 

个 用 于 累计 倒计时 时 间 变 化 的 变量 ( btnRegSec )， 并 初始 化 为 10 秒 ; 第 27 ~36 行 代码 通过 

setInterval() 方 法 对 计时 器 (btnRegTimer ) 进行 了 定义 ， 通 过 disabled 属性 来 定义 注册 按钮 
(<button id="id-btn-reg-timer"> ) 的 样式 ， 通 过 innerText 属性 定义 注册 按钮 的 倒计时 文本 内 

容 (倒计时 秒 数 的 变化 )。 
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下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 4.7 所 示 。 


图 Javascript x 


-人 > Ooah 


注册 按钮 倒计时 效果 


注册 ( 剩余 10 秒 ) 


贺 Javascipt x 四 可 


注册 按钮 倒计时 效果 


注册 (剩余 0 秒 ) 


图 4.7 JavaScript 注册 按钮 倒计时 效果 
如 图 4.7 中 箭头 所 示 ， 当 倒计时 完成 后 ， 页 面 中 按钮 的 禁用 状态 被 解除 ， 并 变 为 可 用 状态 。 


4.9 计时 器 按钮 


前 面 介绍 了 具有 倒计时 效果 的 注册 按钮 ， 其 实 还 有 一 种 类 似 秒表 计时 器 功能 的 按钮 ， 同 样 是 
通过 JavaScript 计时 器 来 实现 的 。 一 般 来 讲 ， 秒 表 计 时 器 具有 开始 计时 、 和 暂停 计时 、 恢 复 计时 和 停 
止 计时 这 几 个 基本 功能 且 时 间 单 位 显示 到 毫秒 ， 就 如 同 百 米 竞赛 中 裁判 员 使 用 的 秒表 一 样 。 

下 面 就 具体 介绍 一 个 JavaScript 通过 setInterval() 方 法 实现 具有 计时 器 按钮 功能 的 代码 实例 。 


【代码 4-8】( 详 见 源 代码 目录 ch04-js-btn-timer.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 <title>JavaScript 全 程 实例 </title> 
05 </head> 

06 <body onload="init();"> 

07 <!-- 添加 文档 主体 内 容 --> 

08 <header> 

09 <nav>JavaScript 按钮 特效 - 计时 器 按钮 </nav> 
10 </header> 

11 <!-- 添加 文档 主体 内 容 --> 
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有 
13 
14 
5 
16 
17 


18 


EE 


20 


21 
22 
23 
24 
区 
26 
2 
28 
29 
30 
3 
32 
3 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 


<div css="css-btn-timer"> 
<p> 
<button id="id-btn-timer"” disabled> 计 时 器 按钮 (0) 秒 </button> 
</p> 
<p> 
<button id="id-btn-start" onclick="on start timer() "> 开始 倒计时 
</button> 
<button id="id-btn-pause" onclick="on _ pause _ timer () "> 暂停 倒计时 
</button> 
<button id="id-btn-restore” onclick="on restore _ timer () "> 恢复 倒计时 
</button> 
<button id="id-btn-stop"” onclick="on_stop_ timer () "> 停止 倒计时 
</button> 
</P> 
</div> 
</body> 
<script type="text/javascript"> 
var myTimer = null; // TODO: 定义 计时 器 
var mySec = 0; // TODO: 定义 累加 器 
function init() { 
var V_btn = document .getElementById('id-btn-timer'); 
V_btn.innerText = "计时 器 按钮 (0) 秒 "; 
Var v_btn pause = document .getElementById('id-btn-pause'); 
VvV_btn pause.disabled = true; 
Var Vv_btn restore = document .getElementById('id-btn-restore'); 
VvV_btn restore.disabled = true; 
var V_btn_stop = document .getElementById('id-btn-stop'); 
VvV_btn_ stop.disabled = true; 
} 
function on start timer() { 
Var V_btn = document .getElementById('id-btn-timer'); 
Var V_btn_start = document .getElementById('id-btn-start'); 
VvV btn start.disabled = true; 
var v_btn pause = document .getElementById('id-btn-pause'); 
VvV_btn pause.disabled = false; 
var V_btn_stop = document .getElementById('id-btn-stop'); 
V_ btn stop.disabled = false; 
window.clearInterval (myTimer); // TODO: 清除 计时 器 
mySec = 0; // TODO: 计时 器 清 零 
myTimer = window.setInterval (function () { 
mySec++7 // TODO: 计时 器 累加 
VvV_btn.innerText = "计时 器 按钮 (" + mySec/1000 + ") 秒 "; 
Fe ys 
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5 } 

52 function on pause timer() { 

33 Var Vv btn = document .getElementById('id-btn-timer'); 

54 var Vv _btn pause = document .getElementById('id-btn-pause'); 
55 V_btn pause.disabled = true; 

56 Var Vv btn restore = document .getElementById('id-btn-restore'); 
57 VvV_btn restore.disabled = false; 

58 window.clearInterval (myTimer) // TODO: 清除 计时 器 

59 } 

60 function on restore timer() { 

61 var v_btn = document .getElementById('id-btn-timer'); 

62 var Vv_btn restore = document .getElementById('id-btn-restore'); 
63 V_btn restore.disabled = true; 

64 var Vv_ btn pause = document .getElementById('id-btn-pause'); 
65 V_btn_pause.disabled = false; 

66 myTimer = window.setIinterval (function () { 

67 mySec++7 //TODO: 计时 器 累加 
68 v_btn.innerText = "计时 器 按钮 ("+ mySec/1000 + ") 秒 "; 

69 Yrs 

70 } 

5 function on_stop_timer() { 

3 var V_btn_stop = document .getElementById('id-btn-stop'); 

73 V_btn_stop.disabled = true; 

74 var v_ btn start = document .getElementById('id-btn-start'); 
75 VvV_btn start.disabled = false; 

76 Var v_btn pause = document .getElementById('id-btn-pause'); 
入 VvV_btn pause.disabled = true; 

78 var Vv btn restore = document .getElementById('id-btn-restore'); 
79 VvV_btn restore.disabled = true; 

80 window.clearInterval (myTimer); // TODO: 清除 计时 器 
81 mySec = 0; // TODO: 计时 器 清 零 
82 var V_btn = document .getElementById('id-btn-timer'); 

83 v_btn.innerText = "计时 器 按钮 (0) 秒 "; 

84 | 

85 </script> 

86 </html> 


关于 【代码 4-8】 的 说 明 : 

@ 第 14 行 代码 通过 <button id="id-btn-timer"> 标 签 定义 一 个 按钮 ， 用 于 演示 计时 器 按钮 的 效果 。 

@ 第 17~20 行 代码 通过 <button> 标 签 定义 一 组 按钮 ， 分 别 用 于 实现 开始 倒计时 、 暂 停 倒计时 、 
恢复 倒计时 和 停止 倒计时 这 几 个 基本 功能 。 

@ 第 25 行 代码 定义 并 初始 化 了 一 个 空 的 计时 器 (myTimer = null )， 第 26 行 代码 定义 并 初始 化 
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了 一 个 累加 器 (mySec=0)。 

@ 第 27~36 行 代码 定义 了 Window 对 象 的 onload 事件 处 理 方法 (init() )， 分别 定义 了 开始 倒 计 
时 、 暂 停 倒 计时 、 恢 复 倒 计时 和 停止 倒计时 这 4 个 按钮 的 状态 ， 主 要 是 通过 disabled 属性 来 
实现 启动 或 禁用 按钮 的 功能 。 

@ 第 37~51 行 、 第 52~59 行 、 第 60~70 行 和 第 71~84 行 代码 定义 的 函数 ， 分 别 实现 了 开始 
倒计时 、 暂 停 倒 计时 、 恢 复 倒计时 和 停止 倒计时 的 功能 ， 主 要 是 通过 setInterval() 方 法 和 
clearInterval0 定 义 和 清 除 计 时 器 ( myTimer )， 同 时 通过 累加 器 ( mySec ) 实现 计时 功能 。 同 
时 ， 还 通过 按钮 的 disabled 属性 实现 了 启用 按钮 和 禁用 按钮 的 功能 切换 逻辑 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 4.8 所 示 。 在 4 张 页 面 截图 中 
分 别 演示 了 初始 状态 、 开 始 倒计时 、 暂 停 倒计时 和 恢复 倒计时 的 状态 ,而 单 击 “ 停 止 倒计时 ”按钮 
则 会 恢复 到 初始 状态 。 


© localhost: 


JavaScript 按钮 特效 - 计时 器 按钮 


计时 器 控盘 (2306] 秒 


© localhost: 


JavaScript 按钮 特效 - 计时 器 按钮 JavaScript 按钮 特效 - 计时 器 按钮 


计时 敌 扩 条 (5.758) 秒 计时 嘲 近 钥 (7.467] 秒 


开始 全 计时 乔 仿 倒计时 “恢复 倒计时 停止 例 计 时 天 治国 计 时 。 暂停 倒计时 。 恢复 全 计时。 停止 倒计时 


图 4.8 JavaScript 注册 按钮 倒计时 效果 
4.10 阅读 完 协议 才 可 以 单 击 的 注册 按钮 


前 面 介绍 了 具有 倒计时 效果 的 注册 按钮 ， 说 实话 笔者 对 这 个 功能 不 是 太 “ 感 冒 ”， 因 为 强迫 
读者 等 待 倒计时 也 是 很 让 人 无 语 的 。 那 么 有 没有 改进 版 的 方案 呢 ? 答案 是 肯定 的 ,还 有 一 种 是 “ 阅 
读 完 用 户 协议 后 注册 按钮 才 被 激活 可 以 单 击 ”的 功能 按钮 。 

一 般 注 册页 面 的 用 户 协议 是 放 在 一 个 文本 域 <textarea> 控 件 内 的 ， 我 们 可 以 监听 文本 域 的 
onscroll 滚动 事件 ， 并 借助 滚动 高 度 属 性 (scrollHeight) 来 判断 用 户 是 否 阅读 完 文本 域 中 用 户 协议 ， 
然后 来 激活 启动 用 户 注册 按钮 。 

下 面 就 具体 介绍 一 个 在 阅读 完 用 户 注册 协议 后 用 户 才 可 以 单 击 注册 按钮 的 JavaScript 代码 实例 。 
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【代码 4-9】( 详 见 源 代码 目录 ch04-js-btn-textarea-scroll.html 文件 ) 


01 <!doctype html> 
02 <htm1l lang="en"> 


03 <head> 
04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 阅 读 完 协议 才 可 以 单 击 的 注册 按钮 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


3 <p> 

14 <textarea readonly=true id="id-textarea-reg" 
onscroll="on scroll reg(this.id)"> 

15 阅读 完 协议 才 可 以 单 击 的 注册 按钮 … 

16 </textarea> 

a <button id="id-btn-reg" disabled> 用 户 注 册 </button> 

18 </p> 

19 </body> 

20 <script type="text/javascript"> 

Ch function on _ scroll reg(thisid) { 

温 到 textareaReg = document .getElementById (thisid) 7 

3 if ((textareaReg.scrollTop + textareaReg.clientHeight) >= 

textareaReg.scrollHeight) { 

24 document .getElementById("id-btn-reg") .disabled = false; 

25 } 

26 } 

27 </script> 

28 </html> 


关于 【代码 4-9】 的 说 明 : 
@ 第 14~16 行 代码 通过 <textarea> 标 签 定义 了 一 个 文本 域 ， 同 时 定义 了 onscroll 滚动 事件 方法 
(on_scroll_reg(this.id) )。 

@ 第 17 行 代码 通过 <button id="id-btn-reg"> 标 签 定义 了 一 个 注册 按钮 ， 初 始 状态 是 被 禁用 的 。 

日 第 21~26 行 行 代码 是 on_scroll_reg() 事 件 方法 的 实现 ， 通 过 判断 文本 域 的 scrollTop 属性 和 
clientHeight 属性 之 和 是 否 大 于 scrollHeight 属性 得 出 用 户 是 否 阅 读 完 注册 协议 ， 同 时 是 否 执 
行 启 用 激活 注册 按钮 的 操作 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 4.9 所 示 。 
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阅读 完 协 议 才 可 以 单 击 的 注册 按钮 


图 4.9 JavaScript 注册 按钮 倒计时 效果 
注意 滚动 条 的 初始 位 置 以 及 拖 动 到 底 后 注册 按钮 的 状态 (“ 用 户 注册 ?按钮 被 成 功 启用 激活 ) 。 


第 5 章 链接 特效 


本 章 介 绍 如 何 通过 JavaScript 来 实现 各 种 链接 特效 ， 通 过 这 些 特效 来 丰富 HTML 文档 的 设计 
手段 和 页 面 效果 。 


5.1 链接 概述 


HTML 页 面 中 的 链接 用 于 与 其 他 文档 对 象 〈 锚 点 、 页 面 和 多 媒体 对 象 等 ) 进行 连接 。HTML 
链接 (也 称 “ 超 链接 ”) 可 以 由 一 个 字母 、 一 个 单词 或 者 一 句 话 组 成 ， 也 可 以 是 一 张 照片 或 一 段 视 
频 的 多 媒体 元 素 。 总 之 ， 可 以 通过 单 击 这 些 链接 跳 转 到 其 他 文档 对 象 上 去 。 

一 般 的 ， 在 HTML 文档 中 通过 使 用 <a> 标 签 元 素来 创建 链接 ， 有 具体 有 两 种 定义 方式 : 

日 通过 使 用 href 属性 创建 指向 其 他 页 面 、 多 媒体 对 象 的 链接 。 

@ 通过 使 用 name 属性 创建 文档 内 的 书签 ( 锚 点 )。 


具体 的 语法 格式 如 下 : 


/** 通过 href 属性 定义 超 链接 */ 

<a href="http://www.domain.com/"” target=""> 打 开 链 接 </a> 
/xx 通过 name 属性 定义 书签 〈 锚 点 ) */ 

<a name="label"> 锚 点 书签 ( 锚 点 ) </a> 


另外 ， 在 使 用 href 属性 定义 url 地 址 时 ， 既 可 以 使 用 绝对 地 址 (http://) ， 也 可 以 使 用 相对 地 
址 〈./.) 。 在 使 用 书签 〈 锚 点 ) 时 ， 既 可 以 使 用 name 属性 定义 名 称 ， 也 可 以 使 用 id 属性 定义 唯 
一 标识 符 。 


5.2 ” 带 下 划 线 的 链接 


在 HTML 页 面 中 ， 超 链接 再 被 访问 过 后 默认 会 带 上 下 划 线 ， 用 来 标识 该 超 链接 地 址 已 被 打开 
过 。 那 么 ， 如 何 为 未 被 访问 过 的 超 链 接 加 上 下 划 线 呢 ? 下 面 介 绍 一 个 通过 JavaScript 定义 带 下 划 线 
的 超 链 接 的 代码 实例 。 
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【代码 5-2】( 详 见 源 代码 目录 ch05-js-alink-underline.html 文件 ) 


01 <!doctype html> 

02 <htm1l lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 

06 </head> 

07 <style> 

08 总 

09 text-decoration: none; 

10 } 

11 </style> 

12 <body> 

13 <!-- 添加 文档 主体 内 容 --> 

14 <header> 

15 <nav> 带 下 划 线 的 链接 </nav> 

16 </header> 

17 <!-- 添加 文档 主体 内 容 --> 

18 <div class="css-p"> 

19 <a href="#"> 带 下 划 线 的 链接 (href) </a><br/><br/> 
20 <a name="#"> 带 下 划 线 的 链接 (name) </a><br/><br/> 
2 < 二 = 定义 掖 钮 三 => 

22 <input type="button"” value=" 为 全 部 链接 添加 下 划 线 " 


onclick="addLinkUnderline();"/> 


23 ‘</div> 

24 </body> 

25 <script type="text/javascript"> 

26 function addLinkUnderline() { 

27 // TODO: 获取 到 所 有 的 链接 <a> 

28 var aLinks = document .getElementsByTagName ("a"); 

29 for (var i = 0; i < aLinks.length; i++) { // 遍 历 
30 var link = aLinks[i];  // 当 前 的 链接 DOM 

31 link.style.textDecoration = 'underline'; // 设 置 下 划 线 样式 
32 

33 } 

34 </script> 

35 </html> 


关于 【代码 5-2】 的 说 明 : 

@ 第 19~20 行 代码 通过 <a> 标 签 元 素 定义 一 组 链接 ， 分 别 使 用 href 属性 和 name 属性 来 定义 。 
这 里 需要 读者 注意 的 是 ， 采 用 第 08 ~ 10 行 代码 中 将 <a> 标 签 定义 的 无 下 划 线 的 样式 ， 这 样 页 
面 中 所 显示 的 全 部 <a> 标 签 均 是 无 下 划 线 的 。 
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@ 第 22 行 代 码 通过 <input> 标 签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 onclick 单 击 事件 方法 
(addLinkUnderline() )。 
@ 第 26~33 行 代码 是 addLinkUnderline() 事 件 方法 的 具体 实现 。 其 中 , 第 31 行 代码 通过 为 Style 
对 象 的 textDecoration 属性 定义 属性 值 (underline' )， 将 全 部 链接 <a> 定 义 为 下 划 线 样式 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 5.1 所 示 。 
文件 旧 ”篇 罚 全 查看 历史 加 书 等 鲜 工 民 (| 文件 日 、 编 雪 昌 ”查看 MV) 历史 加 书 等 工具 四 


园 Javascript 全 程 实例 x | 十 ” 国 | 国 Jevascript 全 查实 网 x | 邯 


人 > CGOoaal 踊 鸭 | 三 I€)> CG |© oal 跟 六 | 三 
带 下 划 线 的 链接 带 下 划 | 线 的 链接 
带 下 划 线 的 链接 (href) 薄 下 划 线 的 链接 (href) 


带 下 划 线 的 链接 | 区 下 划 线 的 链接 (name) 
为 全 部 链接 添加 下 划 线 
图 5.1 JavaScript 定 义 带 下 划 线 的 链接 


如 图 5.1 中 箭头 所 示 ， 单 击 “ 为 全 部 链接 添加 下 划 线 ”按钮 后 ， 页 面 中 的 全 部 超 链接 均 添 加 上 
了 下 划 线 样式 。 


5.3 改变 链接 的 click 事件 


对 于 链接 <a> 标 签 元 素来 讲 ， 单 击 click 操作 后 的 跳 转 目标 地 址 正常 都 是 由 href 属性 定义 的 url 
地 址 或 锚 点。 那么 ， 可 不 可 以 改变 <a> 标 签 元 素 中 的 click 事件 呢 ? 下 面 介绍 一 个 通过 JavaScript 改 
变 链接 click 事件 的 代码 实例 。 


【代码 5-3】( 详 见 源 代码 目录 ch05-js-alink-modify-click.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 改 变 链接 的 click 事件 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 
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13 <div class="css-p"> 


14 <p> 

15 <a href="#anchor" id="id-m-1ink"> 一 个 链接 </a> 
16 </p> 

7 <P> 

18 <a name="anchor" id="id-m-anchor"> 一 个 锚 点 </a> 
19 </P> 

20 </div> 

21 </body> 

22 <script type="text/javascript"> 

23 window.onload = function () { 

24 Var mLink = document .getElementById("id-m-link"); 
25 mLink.onclick = function () { 

26 alert (" 超 链接 被 点 击 了 ! ') ; ”// 事 件 的 内 容 逻辑 

27 return false; // 返 回 

28 Fy 

29 ys 

30 </script> 

31 </html> 


关于 【代码 5-3】 的 说 明 : 

@ 第 15 行 代码 通过 <a> 标 签 元 素 定义 了 一 个 链接 , 将 href 属性 值 定义 为 一 个 锚 点 值 (#anchor )、 
id 属性 值 定义 为 ("id-m-link" )。 

@ 第 18 行 代码 通过 <a> 标 签 元 素 定义 了 一 个 锚 点 , 将 name 属性 值 定义 为 (#anchor ), 这 样 就 可 
以 保证 在 单 击 第 15 行 代码 定义 的 链接 后 ， 跳 转 到 第 18 行 代码 定义 的 锚 点 位 置 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 〈 先 注销 第 23 一 29 行 代 码 ) ， 有 具体 效果 如 图 
5.2 所 示 。 


Em EE 


国 Javascript 全 得 实例 六 | 十 国 | 国 ,avascript 全 息 实 人 x 孜 国 
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9 Ge) 中 


改变 链接 的 click 事 件 


v v 


5.2 JavaScript 改变 链接 的 click 事件 (一 ) 


如 图 5.2 中 箭头 所 示 ， 单 击 “ 一 个 链接 ”的 超 链 接 后 ， 页 面 会 自动 跳 转 到 “一 个 锚 点 ”的 锚 点 
位 置 。 
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下 面 继续 看 【代码 5-3】 的 说 明 : 
@ 第 23-~ 29 行 代码 定义 了 Window 对 象 的 onload 事件 处 理 方法 。 其 中 ， 第 25 ~ 28 行 代码 为 第 
15 行 代码 定义 的 超 链接 (id="id-m-link" ) 添加 了 onclick 单 击 事件 处 理 方法 ， 第 26 行 代码 定 
义 了 一 个 弹出 式 alert 警告 框 ， 第 27 行 代码 通 过 retum 语句 返回 。 这 样 ， 当 用 户 单 击 第 15 行 
代码 定义 的 超 链接 时 ， 就 会 执行 第 25 ~ 28 行 代码 定义 的 onclick 单 击 事件 处 理 方法 ， 而 href 
属性 定义 的 锚 点 地 址 会 被 覆盖 掉 。 
下 面 继续 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 5.3 所 示 。 
文件 日 ”编辑 但 ”查看 VM) 历史 回 书 等 印 工具 和 | 文件 日 编辑 昌 ”查看 VW 历史 书 等 工具 四 
园 Javascript 全程 实 例 
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改变 链接 的 click 事 件 


[iocalhost63342/js-tota.d9ggakpbmObagegzanchor | 
5.3 ”JavaScript 改变 链接 的 click 事件 (二) 
如 图 5.3 中 箭头 所 示 ， 单 击 “ 一 个 链接 ”链接 后 ， 页 面 中 会 弹出 一 个 警告 框 。 另 外 ， 读 者 可 以 
测试 一 下 ， 当 单 击 警告 框 中 的 “确定 ”按钮 关闭 该 警告 框 后 ， 页 面 是 不 会 如 图 5.2 中 的 效果 那样 自 
动 跳 转 到 “一 个 锚 点 ”位 置 上 的 。 


v 


5.4 关闭 窗口 的 “X” 链 接 


在 HTML DOM 的 Window 对 象 中 ， 定 义 有 一 个 close() 方 法 可 以 关闭 窗口 。 这 样 ， 设 计 人 员 就 
可 以 在 页 面 中 自 定 义 一 个 “X” 链 接 来 关闭 页 面 窗 口 了 。 需 要 读者 注意 的 是 ， 该 方法 对 于 各 个 浏览 
器 的 兼容 性 〈 主 要 是 由 于 有 的 浏览 器 自身 进行 了 限制 ) 不 太 友 好 ， 所 以 设计 人 员 在 使 用 时 要 慎重 。 
下 面 介绍 一 个 通过 JavaScript 实现 关闭 窗口 的 “X” 链 接 的 代码 实例 。 


【代码 5-4】( 详 见 源 代 码 目录 ch05jjs-alink-x-close.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 
04 <!-- 添加 文档 头 部 内 容 --> 
05 <title>JavaScript 全 程 实例 </title> 


06 </head> 
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07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
Ey 
18 
9 
20 
21 


<!-- 添加 文档 主体 内 容 --> 
<header> 

<nav> 关 闭 窗口 的 “Xx” 链接 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 


点 击 &nbsp;<a href="#"” id="id-x-link">X</a>g&nbsp; 关 闭 窗口 
</body> 
<script type="text/javascript"> 
Var xLink = document .getElementById("id-x-link"); 
xLink.onclick = function() { 
window.close(); // 关 闭 窗口 
return false; // 返 回 
pn 
</script> 
</html> 


关于 【代码 5-4】 的 说 明 : 


日 第 12 行 代码 通过 <a> 标 签 元 素 定义 了 一 个 链接 ， 风 格 样式 接近 窗口 标题 栏 中 的 关闭 按钮 。 
@ 第 17 行 代码 通过 调用 Window 对 象 的 close() 方 法 关闭 当前 页 面 窗 口 。 


某 种 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 5.4 所 示 。 
文件 器“ 轧 绢 日 言 者 WW 历史 加 书 等 呈 “ 工 得 四 
| 国 ,wascniptsesm xx|] 十 国 
CGOoar 器 » = 三 


关闭 窗口 的 “X” 链 接 


点 击 X 关 闭 窗 口 


图 5.4 ， JavaScript 实现 关闭 窗口 的 “X” 链 接 
如 图 5.4 中 箭头 所 示 ， 当 点 击 页 面 中 “X” 超 链接 后 ， 会 关闭 当前 页 面 窗口 。 


5.5 ”用 链接 模拟 一 个 按钮 


对 于 链接 和 按钮 而 言 ， 从 本 质 上 虽然 是 两 种 不 同 的 HTML 标签 元 素 ， 但 最 终 所 实现 的 功能 从 
意义 上 讲 是 十 分 类 似 的 。 那 么 可 不 可 以 将 链接 模拟 成 为 一 个 按钮 呢 ? 下 面 介绍 一 个 通过 


JavaScript 将 链接 模拟 成 为 按钮 的 代码 实例 。 
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【代码 5-5】( 详 见 源 代码 目录 ch05-js-alink-btn.html 文件 ) 


01 <!doctype html> 
02 <htm1l lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 用 链接 模拟 一 个 按钮 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


<> 

14 <a href="#"” id="id-link-btn"> 按 钮 式 链接 </a> 

15 </p> 

16 </body> 

17 <script type="text/javascript"> 

18 window.onload = function () { 

19 Var linkBtn = document.getElementById("id-1ink-btn") 7 
20 // TODO: 将 链接 定义 成 按钮 样式 

21 linkBtn.style.fontSize = '16px'; // 字 体 

Gh linkBtn.style.textAlign = 'center'; // 字 符 对 齐 
23 linkBtn.style.color = 'white'; // 颜 色 

24 linkBtn.style.padding = '4px 10px'; // 内 距离 

5 linkBtn.style.margin = '3px'; // 外 边框 

26 linkBtn.style.background = 'gray'; // 背 景色 

27 linkBtn.style.textDecoration = 'none'; // 文 本 样式 
28 // TODO: 边框 颜色 ， 造 成 深浅 效果 来 模仿 按钮 

29 linkBtn.style.borderColor = '#EEEEEE #666 #666 #EEEEEE'; 
30 linkBtn.style.borderstyle = 'solid'; // 边 框 样式 为 实 线 
hh linkBtn.style.borderWidth = 'lpx'; // 边 框 的 粗细 
32 }; 

33 </script> 

34 </html> 


关于 【代码 5-5】 的 说 明 : 


@ 第 14 行 代码 通过 <a> 标 签 元 素 定义 了 一 个 链接 ， 目 标 是 把 该 链接 模拟 成 为 一 个 按钮 的 样式 。 
e@ 第 21~31 行 代码 通过 Style 对 象 将 链接 的 样式 模拟 成 为 按钮 的 样式 ， 主 要 是 针对 背景 颜色 
(background ) 属性 和 一 组 边框 样式 (borderColor、borderStyle 和 borderWidth ) 属性 的 定义 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 5.5 所 示 。 
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ET 
园 Javascript 全 在 实例 X 证 国 
CC |© lal 跟 | 生 


用 链接 模拟 一 个 按钮 


EE 


图 5.5 ”JavaScript 实现 用 链接 模拟 一 个 按钮 
如 图 5.5 中 箭头 所 示 ，HTML 文档 中 原本 定义 的 超 链 接 完 全 被 模拟 成 为 一 个 按钮 的 样式 了 。 


5.6 用 链接 替代 表单 提交 按钮 


5.5 节 中 实现 了 用 链接 模拟 一 个 按钮 样式 的 操作 , 本 节 将 进一步 用 链接 替代 表单 中 的 提交 按钮 ， 
真正 实现 提交 表单 的 功能 。 下 面 看 一 个 通过 JavaScript 实现 用 链接 替代 表单 提交 按钮 的 代码 实例 。 


【代码 5-6】( 详 见 源 代 码 目录 ch05jjs-alink-submit.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 用 链接 蔡 代 表单 提交 按钮 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <form name="formLink" method="get" action="ch05-js-alink-submit.php"> 
14 <table> 


a <tr> 

16 <th> 用 户 名 : gnbsp; gnbsp;</th> 

Ln <td><input type="text" name="username"/></td> 
18 </tr> 

9 <tr> 

20 <th></th> 


2 <td> 
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22 <a href="#" id="id-link-submit" onclick="on link submit()"> 
提交 表单 </a> 

23 </td> 

24 </tr> 

ph </table> 

26 </form> 

27 </body> 

28 <script type="text/javascript"> 

29 Vea 

30 * 通过 链接 提交 表单 

31 sk 

32 function on link submit() { 

33 document .formLink.submit (); //TODO: 提交 表单 

34 } 

35 </script> 

36 </html> 


关于 【代码 5-6】 的 说 明 : 

@ 第 13 ~ 26 行 代码 通过 <form> 标 签 元 素 定义 了 一 个 表单 。 其 中 ， 第 17 行 代码 定义 了 一 个 文本 
框 ， 用 于 输入 用 户 名 ; 第 22 行 代码 通过 <a> 标 签 元 素 定义 了 一 个 链接 ， 并 定义 了 单 击 onclick 
事件 方法 (on_link_submitO )， 目 的 是 把 该 链接 模拟 成 为 一 个 提交 ( Submit ) 按钮 。 

@ 第 32~34 行 代码 是 对 onclick 事件 方法 (on_link_submit() ) 的 具体 实现 ， 第 33 行 代码 直接 通 
过 调用 Form 对 象 的 submit() 方 法 实现 表单 的 提交 ， 这 样 就 将 链接 <a> 标 签 蔡 代 成 为 提交 

(Submit ) 按钮 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 5.6 所 示 。 
[六 # 逢 8 去 VW 万 加 -#E@ I 有 TD 坟 | 文件 日 过 各 四 喜 硬 W 历 史书 入 @) I 生地 


| 国 wasoptsexa x | 时 | Iocahostso90 /stotatsamples/eh x | 十 国 
GC © local 跟 人 沪 ) 三 | 狼 《 CG © iodall 味 | 为 中 三 
Form username : king. 
用 链接 车 代表 单 提交 按钮 
用 户 名 : |king| 


5.6 JavaScript 实现 用 链接 蔡 代 表单 提交 按钮 


如 图 5.6 中 箭头 所 示 ， 第 22 行 代码 定义 的 链接 <a> 标 签 被 模拟 成 为 一 个 提交 按钮 样式 。 同 时 ， 从 
单 击 链接 “提交 表单 ”后 的 提交 结果 来 看 ， 链 接 <a> 成 功 蔡 代 了 表单 中 提交 (Submit) 按钮 的 功能 。 
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5.7 ”动态 修改 一 个 链接 的 地 址 


超 链接 <a> 标 签 元 素 中 定义 有 一 个 属性 href， 用 于 指定 该 链接 的 目标 URL 地 址 或 锚 点 。 可 以 
通过 动态 修改 该 属性 值 达到 动态 修改 链接 目标 地 址 的 功能 。 下 面 看 一 个 通过 JavaScript 实现 动态 修 
改 一 个 链接 地 址 的 代码 实例 。 


【代码 5-7】( 详 见 源 代码 目录 ch05-js-alink-modify-href.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 动 态 修改 一 个 链接 的 地 址 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <p> 

14 <a href="#first-anchor" id="id-m-1ink"> 一 个 链接 </a><br/> 

15 <input type="button" value=" 修 改 链接 地 址 " id="id-btn" 
onclick="on modify url();"/> 

16 </p> 

17 <p> 

18 <a name="first-anchor"> 第 一 个 锚 点 </a> 

19 </p> 

20 <p> 

21 <a name="second-anchor"> 第 二 个 锚 点 </a> 

2 p> 

23 </body> 

24 <script type="text/javascript"> 

25 pb 

26 * 动态 修改 链接 的 地 址 

A Ee 

28 function on modify url() { 

29 var mLink = document .getElementById ("id-m-link"); 

30 mLink.href = "#second-anchor"; // TODO: 修改 链接 的 地 址 

3 } 


32 </script> 
33 </html> 
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关于 【代码 5-7】 的 说 明 : 
@ 第 18 行 和 第 21 行 代码 通过 <a> 标 签 元 素 定义 了 两 个 锚 点 ("first-anchor" 和 "second-anchor" )。 
@ 第 14 行 代码 通过 <a id="id-m-link"> 标 签 元 素 定义 了 一 个 链接 , 初始 的 href 属性 值 为 第 一 个 锚 
点 ("#first-anchor" )。 
@ 第 15 行 代 码 通过 <input> 标 签 定义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方 法 
(on_ modify_ url() )， 目 标 是 通过 动态 修改 <a id="id-m-link"> 标 签 元 素 的 href 属性 值 来 改变 链 
接 的 目标 地 址 。 
@ 第 28~31 行 代码 是 对 onclick 事件 方法 (on_modify_url0 ) 的 具体 实现 。 其 中 ， 第 30 行 代码 
直接 通过 修改 href 属性 值 ， 将 初始 的 第 一 锚 点 〈 "#first-anchor" ) 改变 成 第 二 个 锚 点 
("#second-anchor" )。 


5.8 让 所 有 链接 都 在 新 窗口 打开 


超 链接 <a> 标 签 元 素 中 定义 有 一 个 target 属性 ， 用 于 规定 以 何 种 方式 打开 链接 文档 。 该 属性 的 
默认 值 为 “_self”， 表 示 在 当前 窗口 打开 文档 ; 如 果 将 属性 值 定义 为 “_blank”， 则 表示 在 新 窗口 
中 打开 文档 。 

下 面 看 一 个 通过 JavaScript 实现 让 所 有 链接 都 在 新 窗口 打开 的 代码 实例 。 


【代码 5-8】( 详 见 源 代 码 目录 ch05-js-alink-target-blank.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 让 所 有 链接 都 在 新 窗口 打开 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div class="css-p"> 


14 <!-- 定义 链接 --> 


EE <a href="#"> 链 接 一 </a><br/> 
16 <a href="#"> 链 接 二 </a><br/> 
17 <a href="#"> 链 接 三 </a><br/> 


18 <1-- 定义 按钮 -=> 
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19 <input type="button" value=" 修 改 打开 方 式 " id="myBtn" 
onclick="modifyLinkTarget ();"/> 

20 </div> 

21 </body> 

22 <script type="text/javascript"> 

EK, /和 

24 * 设 定 所 有 链接 都 在 新 窗口 打开 

25 有 

26 function modifyLinkTarget() { 

27 // 获 取 到 所 有 链接 的 DOM 

28 Var linkDOMS = document .getElementsByTagName ("a"); 

29 for (var i = 0; i < linkDOMS.length; i++) { 

30 var link = linkDOMS[i]; // 当 前 的 链接 DOM 

31 link.target = " blank"; // 在 新 窗口 中 打开 

加 肥 | 

33 } 

34 </script> 

35 </html> 


关于 【代码 5-8】 的 说 明 : 

@ 第 15~17 行 代码 通过 <a> 标 签 元 素 定义 了 一 组 超 链接 ， 由 于 未 指定 target 属性 值 ， 因 此 target 
属性 值 默 认为 “_self”。 

ee 第 29~32 行 代码 通过 for 循环 语句 ， 将 页 面 中 的 全 部 链接 target 属性 值 修改 为 “blank”， 这 
样 再 点 击 页 面 中 的 任何 一 个 超 链接 都 将 会 在 新 窗口 中 打开 了 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 5.7 所 示 。 

文件 四 ”篇 雷 四 ”查看 WW 历史 加 书签 工 肯 四 ”帮助 晶 | 文件 昌 ” 编 如 四 ” 言 者 VW 历史 (9 书 答 (8) 工 肯 四 ”帮助 

园 Javascript 全 程 实例 x eS IB | 


QC | © localt 中 | … | 沙 | 三 


加 Javascript 全 程 | 国 Javascipt 人 EX | 十 国 


让 所 有 链接 都 在 新 窗口 打开 


链接 一 链接 一 链接 二 


wane 
5.7 ”JavaScript 实现 让 所 有 链接 都 在 新 窗口 打开 


如 图 5.7 中 箭头 所 示 ， 在 通过 单 击 “ 修 改 打开 方式 ”按钮 修改 链接 <a> 标 签 元 素 的 target 属性 
值 后 ， 再 单 击 页 面 中 的 超 链接 将 会 在 新 窗口 中 打开 页 面 。 
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5.9 让 页 面 所 有 的 超 链接 都 失效 


超 链接 <a> 标 签 元 素 中 定义 有 一 个 target 属性 ， 用 于 规定 以 何 种 方式 打开 链接 文档 。 该 属性 的 
默认 值 为 “_self”， 表 示 在 当前 窗口 打开 文档 :如果 将 属性 值 定义 为 “_blank”， 则 表示 在 新 窗口 
中 打开 文档 。 

下 面 看 一 个 通过 JavaScript 实现 让 所 有 链接 都 失效 的 代码 实例 。 


【代码 5-9】( 详 见 源 代 码 目录 ch05-js-alink-href-invalid.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 让 页 面 所 有 的 超 链接 都 失效 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div class="css-p"> 


14 <!-- 定义 链接 --> 


15 <a href="#"> 链 接 一 </a>&nbsp; gnbsp; 

16 <a href="#"> 链 接 二 </a>&gnbsp; gnbsp; 

17 <a href="#"> 链 接 三 </a>gnbsp; gnbsp; <br/><br/><br/> 

18 <1=~ 定义 按钮 ==> 

19 <input type="button" value=" 让 超 链接 失效 " onclick="invaildLinks () ;"/> 
20 </div> 

21 </body> 

22 <script type="text/javascript"> 

和 23 3 

24 * 让 页 面 所 有 的 超级 链接 都 失效 

25 区 

26 function invaildLinks() { 

2 // 获 取 到 所 有 的 链接 的 DOM 

28 Var linkDOMS = document .getElementsByTagName ("a") 
29 for (var i = 0; i < linkDOMS.lengthy i++) { 

30 var link = linkDOMS[i]; // 当 前 的 链接 DOM 


31 link.onclick = null; // 把 单 击 事件 置 空 
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32 link.href = 'javascript:void(0)'; ”// 地 址 改 成 什么 都 不 做 
33 } 

34 . 

35. "</script> 

36 </html> 


关于 【代码 5-9】 的 说 明 : 

® 【代码 5-9】 是 在 【代码 5-8】 的 基础 上 修改 而 成 的 ， 关 键 点 是 第 31 行 和 第 32 行 代码 。 

@ 第 31 行 代码 通过 将 超 链接 对 象 (link ) 的 onclick 事件 置 空 ， 实 现 了 屏蔽 链接 <a> 标 签 元 素 的 
单 击 操作 。 

@ 第 32 代码 通过 将 超 链接 对 象 (link) 的 href 属性 值 修改 为 (javascript:void(0) )， 表 示 将 执行 
一 段 js 脚本 代码 ; 而 具体 的 脚本 代码 ( void(0)) 又 是 一 个 空 方法 ， 也 就 相当 于 让 页 面 中 的 超 
链接 都 失效 。 


5.10 ”为 链接 地 址 新 加 一 个 参数 


URL (统一 资源 定位 符 ) 是 互联 网 上 标准 资源 的 地 址 ， 一 般 由 页 面 名 称 和 若干 参数 组 合 而 成 。 
例如 “http://www.people.com/index.html?page=1&...” 就 是 一 个 标准 的 URL 地 址 写法 。 

超 链 接 <a> 标 签 元 素 中 定义 的 href 属性 值 就 是 一 个 具体 的 URL 地 址 。 那 么 ， 可 不 可 以 动态 地 
为 超 链 接 <a> 标 签 元 素 中 定义 的 URL 地 址 添加 参数 呢 ? 下 面 看 一 个 通过 JavaScript 实现 为 URL 链 
接地 址 新 加 一 个 参数 的 代码 实例 。 


【代码 5-10】( 详 见 源 代码 目录 ch05-js-alink-href-param.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 为 链接 地 址 新 加 一 个 参数 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div class="css-p"> 

14 <a href="index.php"> 链 接 1</a>gnbsp; gnbsp; 

15 <a href="index.php?page=1"> 链 接 2</a>&gnbsp; gnbsp;<br><br> 
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16 <input type="button" value=" 为 链接 地 址 新 加 一 个 参数 " 
onclick="addUrlParam();"/> 


17 </div> 

18 </body> 

19 <script type="text/javascript"> 

20 Th 

2 * 为 链接 地 址 新 加 一 个 参数 

22 ER 

edc function addUrlParam() { 

24 // 得 到 链接 的 DOM 

25 var links = document .getElementsByTagName ('a'); 
26 // 遍 历 所 有 的 链接 

2 for (var i = 0; i < links.length; i++) { 
28 var aHref = links[i]['href'];  ”// 得 到 当前 的 链接 地 址 
29 // 如 果 链 接地 址 包含 了 问号 ， 说 明 已 经 带 有 参数 了 
30 if (aHref.indexOf('?') > 0) { 

31 // 使 用 & 符 号 串联 更 多 的 参数 

32 links[i]['href'] = href + '&tab=2'; 
33 } else { 

34 // 使 用 ? 来 新 加 第 一 个 参数 

35 links[i]['href'] = href + '?page=1'; 
36 1 

37 

38 

39 </script> 

40 </html> 


关于 【代码 5-10】 的 说 明 : 

@ 第 28 行 代码 通过 href 属性 获取 了 当前 链接 <a> 标 签 元 素 定义 的 URL 地 址 (aHref)。 

@ 第 30 行 代码 通过 证 条 件 语句 判断 aHref 地 址 是 否 包含 字符 “?”。 如 果 包 含 就 表示 该 地 址 已 经 
包含 参数 了 ， 执 行 第 32 行 代码 ; 如 果 不 包含 就 表示 该 地 址 没有 带 参 数 ， 执 行 第 35 行 代码 。 

@ 第 32 行 代码 通过 字符 '&' 串联 新 加 的 参数 。 

@ 第 35 行 代码 通过 字符 ?新 加 第 一 个 参数 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 5.8 和 图 5.9 所 示 。 

如 图 5.8 中 箭头 所 示 ， 单 击 “ 为 链接 地 址 新 加 一 个 参数 ”按钮 后 ， 浏 览 器 状态 栏 中 显示 的 URL 
地 址 新 加 了 第 1 个 参数 (page=1) ， 注 意 问号 〈?) 的 使 用 方法 。 

如 图 5.9 中 箭头 所 示 ， 单 击 “ 为 链接 地 址 新 加 一 个 参数 ”按钮 后 ,浏览 器 状态 栏 中 显示 的 URL 
地 址 新 加 了 第 2 个 参数 (tab=2) ， 注 意 & 符 号 的 使 用 方法 。 
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图 5.9 JavaScript 实现 为 链接 地 址 新 加 一 个 参数 已 带 有 参数 的 情况 ) 


5.11 返回 页 面 项 部 的 链接 


相信 读者 在 浏览 很 多 大 型 门户 网 站 的 主页 时 都 会 发 现 页 面 栏目 板块 非常 多 ， 而 且 页 面 的 长 度 
很 长 。 一 般 情 况 下 ， 这 类 页 面 会 在 每 个 栏目 板块 内 都 定义 一 个 链接 (例如 : 返回 项 部) ， 用 于 执行 
返回 到 页 面 顶部 的 操作 ， 是 一 个 非常 实用 的 功能 。 

如 果 要 实现 返回 页 面 项 部 链接 的 功能 ， 就 要 使 用 到 scrollTop 这 个 属性 。 根 据 HTML DOM 规 
范 的 定义 ，scrollTop 属性 可 以 获取 或 设置 一 个 元 素 的 内 容 垂 直 滚 动 的 像素 数 。 如 果 我 们 尝试 将 
<html> 对 象 的 scrollTop 属性 设置 为 0， 是 不 是 就 可 以 实现 返回 页 面 项 部 的 操作 了 了 呢 ? 下 面 看 一 个 
通过 JavaScript 实现 定义 回 到 页 面 项 部 链接 的 代码 实例 。 


【代码 5-11】( 详 见 源 代 码 目 录 ch05-js-alink-scrollTop.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
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06 </head> 
07 <body> 
08 <!-- 添加 文档 主体 内 容 --> 
09 <header> 
10 <nav>JavaScript 链接 特效 - 返回 页 面 顶 部 的 链接 </nav> 
11 </header> 
12 <!-- 添加 文档 主体 内 容 --> 
13 <a href="javascript:toPageTop();"> 回 到 顶部 </a> 
14 <a href="javascript:toPageTop();"> 回 到 顶部 </a> 
15 <a href="javascript:toPageTop();"> 回 到 顶部 </a> 
16 </body> 
17 <script type="text/javascript"> 
18 V3 
19 * 回 到 页 面 顶部 链接 的 方法 
20 a 
安江 function toPageTop () { 
党 // TODO: 通过 修改 document 的 scrollTop 属性 值 来 返回 到 页 面 顶部 
23 if(document .compatMode === "CSSlCompat") { 
24 document .documentElement.scrollTop = 0; 
pds } else if(document.compatMode === "BackCompat") { 
26 document .body.scrollTop = 0; 
2 } else { 
28 document .documentE1lement .scrollTop = 0; 
29 i 
30 } 
31 </script> 
32 </html> 


关于 【代码 5-11】 的 说 明 : 


@ 第 13~15 行 代码 通过 <a> 标 签 元 素 定义 了 一 组 超 链 接 (“ 回 到 顶部 ” )， 其 中 href 属性 值 均 定 


义 为 一 行 js 代码 (javascript:toPageTop() )， 当 用 户 点 击 该 超 链接 时 就 会 调用 toPageTop() 方 法 。 


@ 第 21~30 行 代码 是 对 toPageTop() 方 法 的 实现 , 通过 设 定 document 对 象 的 scrollTop 属性 值 为 


0， 实 现 返 回 页 面 顶部 的 操作 。 
需要 注意 的 是 ， 第 23 一 29 行 代码 中 通过 让 条 件 选择 语句 判断 了 compatMode 属性 的 取 值 ， 然 


后 根据 结果 执行 了 不 同 的 js 脚本 代码 。 原 因 是 对 于 HTML 文档 而 言 ， 是 否定 义 DTD 类 型 对 于 
scrollTop 属性 的 使 用 方法 是 不 同 的 ,而 compatMode 属性 就 是 用 于 判断 HTML 文档 是 否定 义 了 DTD 
类 型 的 。 
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5.12 ”需要 确认 的 超 链接 


如 果 想 在 打开 一 个 超 链接 之 前 需要 用 户 确认 一 下 是 否 打开 该 链接 ， 那 么 这 个 功能 如 何 实现 
呢 ? 下 面 看 一 个 通过 JavaScript 实现 需要 确认 的 超 链接 的 代码 实例 。 


【代码 5-12】( 详 见 源 代 码 目 录 ch05-js-alink-confirm.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 链接 特效 - 需要 确认 的 超 链接 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <a href="http://www.gov.cn/" onclick="return(confirmOpen (this.href))"> 


打开 超 链 接 </a> 
14 </body> 
15 <script type="text/javascript"> 
16 pe 
17 * 需要 确认 的 链接 
18 * @param link 
i * @returns {boolean} 
20 a 
2 function confirmOpen(link) { 
22 if (confirm('" 请 您 确认 打开 ' + link + ' 网 址 吗 ?')) { 
23 return true; // TODO: 返回 true 
24 } else { 
25 return false; // TODO: 返回 false 
26 
27 } 


28 </script> 
29 </html> 
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关于 【代码 5-12】 的 说 明 : 

@ 第 13 行 代码 通过 <a> 标 签 元 素 定义 了 一 个 超 链 接 , 其 中 定义 了 href 属性 值 ("http:/wwwgovcn/" 
同时 ,还 定义 了 onclick 事件 处 理 方法 (return(confirmOpen(this.href)) )， 这 行 js 代码 的 含义 是 
直接 通过 return 语句 返回 confirmOpen() 方 法 的 返回 值 。 

这 里 需要 注意 的 是 , 对 于 超 链接 <a> 标 签 元 素 的 单 击 操作 而 言 , onclick 事件 方法 执行 先 于 href 
属性 定义 的 URL 地 址 ; 如 果 onclick 事件 方法 返回 false， 就 不 会 跳 转 到 href 属性 值 指定 的 
URL 地 址 上 去 了 。 

@ 第 21~27 行 代码 是 对 confirmOpen() 方 法 的 实现 。 其 中 ， 第 22 行 代码 通过 调动 confirm() 方 法 
让 用 户 选择 是 否 跳 转 到 指定 的 网 址 上 ， 只 有 用 户 确认 后 ( 单 击 confirm 弹出 窗口 中 的 “确定 ” 
按钮 ) 才 会 继续 进行 跳 转 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 页 面 的 初始 效果 如 图 5.10 所 示 。 

如 图 5.10 中 箭头 所 示 ， 单 击 页 面 中 的 “打开 超 链 接 ” 链 接 ， 页 面 效 果 如 图 5.11 所 示 。 
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图 5.10 JavaScript 实现 需要 确认 的 超 链接 图 5.11 JavaScript 实现 需要 确认 的 超 链接 
(初始 页 面 ) (确认 弹出 框 ) 
如 图 5.11 中 箭头 所 示 ， 我 们 可 以 分 别 单 击 确认 框 中 的 “确定 ”按钮 和 “取消 ”按钮 ， 页 面 效 
果 如 图 5.12 所 示 。 
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会 中 华人 民 共 和 国 中 央 人 民政 府 
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“取消 "后 页 面 没有 发 生 跳 转 
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第 6 章 图 片 特效 


本 章 介 绍 如 何 通过 JavaScript 来 实现 各 种 图 片 特效 ， 通 过 这 些 特效 来 丰富 HTML 文档 的 设计 
手段 和 页 面 效果 。 


6.1 图 片 概述 


图 片 是 HTML 页 面 中 必 不 可 少 的 元 素 ， 可 以 用 来 丰富 网 页 的 设计 手段 和 展示 特效 。 在 HTML 
文档 中 ， 一 般 通 过 使 用 <img> 标 签 元 素来 定义 图 片 ， 具 体 的 语法 格式 如 下 : 


/** 网 页 图 片 定义 */ 


<img src=" " alt=" " /> 


其 中 ，sre 属性 是 必需 的 ， 用 于 指定 图 像 文 件 的 URL 地 址 路 径 ， 而 alt 属性 是 一 个 可 选 属性 ， 
用 于 规定 在 图 像 无 法 显示 时 的 替代 文本 。 

通过 JavaScript 脚本 语言 可 以 为 网 页 图 片 实现 多 种 特效 ， 比 如 图 片 比例 缩放 、 放 大 镜 效果 、 自 
适应 大 小 、 图 片 边框 、 动 态 加 载 、 延 迟 加 载 等 。 后 面 将 为 读者 介绍 多 种 HTML 网 页 图 片 特效 的 代 
码 实例 。 


6.2 图片 比例 缩放 


在 HTML DOM 规范 中 ，Style 对 象 定义 有 一 个 transform (WebkitTransform) 属性 ， 该 属性 允 
许 向 元 素 应 用 旋转 、 缩 放 、 移 动 或 倾斜 等 2D 变换 操作 。 具 体 变换 操作 需要 配合 使 用 scale(r) 方 法 进 
行 ， 该 方法 通过 定义 缩放 因子 〈r) 为 当前 画布 添加 一 个 缩放 变换 。 下 面 介 绍 一 个 通过 JavaScript 
实现 图 片 比例 缩放 特效 的 代码 实例 。 


【代码 6-2】( 详 见 源 代 码 目录 ch06jjs-img-scale.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 


05 <script type="text/javascript" src="js/ch06-js-browser.js"></script> 
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06 <title>JavaScript 全 程 实例 </title> 
07 </head> 
08 <body> 
09 <!-- 添加 文档 主体 内 容 --> 
10 <header> 
ph <nav> 图 片 比例 缩放 </nav> 
12 </header> 
13 <!-- 添加 文档 主体 内 容 --> 
14 <p> 
15 <img src="images/js.jpg" id="id-img-scale"/><br> 
16 <input type="button" value=" 缩 小 " onclick="toScale(-1)"/> 
Ee <input type="button"” value=" 放 大 " onclick="toScale(1)"/> 
18 </p> 
19 </body> 
20 <script type="text/javascript"> 
21 var x = 1; // 当 前 的 x 
22 var y = 1; // 当 前 的 y 
23 function toScale(r) {  // 改 变 尺 寸 的 函数 
24 // 获 取 DOM 
25 var img = document.getElementById('id-img-scale')7 
26 EC 0) 芝 全 /7 同 石 
2 x += 0.1;  //x 坐 标 自 加 0.1 
28 y += 0.1;  //Y 坐 标 自 加 0.1 
29 } else { // 向 左 
30 x -= 0.1; “//x 坐标 自 减 0.1 
31 y -= 0.1;  //y 坐标 自 减 0.1 
32 " 
33 Var browser = getBrowser(); 
34 if(browser = "FF") { 
5 img.style.transform = 'scale(" + xX+ ,r+y+ 1)717 
36 } else { 
37 img.style.WebkitTransform = 'scale(' +x+ ,r+y+"')'; 
38 ’ 
| } 
40 </script> 
41 </html> 


e 第 15 行 代码 通过 <img> 标 签 元素 定 义 了 一 幅 图 片 (src 属性 定义 了 图 片 路 径 ， 并 定义 了 记 属 


关于 【代码 6-2】 的 说 明 : 


性 值 )， 用 于 进行 图 片 比例 缩放 的 测试 。 
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@ 第 16~17 行 代码 通过 <input> 标 签 元 素 定义 了 一 组 按钮 ， 并 定义 了 onclick 单 击 事件 方法 
(toScale0 )， 用 于 进行 图 片 比例 缩放 操作 。 

@ 第 21~22 行 代码 定义 了 两 个 变量 (x、y )， 用 于 定义 图 片 比例 缩放 的 因子 。 

”第 23 ~39 行 代码 是 toScale() 事 件 方法 的 具体 实现 .其 中 ,第 35 行 通过 scale() 方 法 修改 transform 
属性 值 进 行 图 片 比例 缩放 操作 ， 第 37 行 代码 通过 scale() 方 法 修改 WebkitTransform 属性 值 进 
行 图 片 比例 缩放 操作 。 
transform 属性 和 WebkitTransform 属性 是 为 了 满足 浏览 器 兼容 性 而 使 用 的 。 第 33 行 代码 通过 
调用 一 个 getBrowser() 方 法 返回 当前 浏览 器 类 型 ， 该 方法 定义 在 第 05 行 代码 引用 的 外 部 js 脚 
本 文件 中 ( src="js/ch06-js-browser.js" )。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 6.1 所 示 。 
Er EE TE | 
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En 
图 6.1 JavaScript 实现 图 片 比例 缩放 


如 图 6.1 中 箭头 所 示 ， 中 间 图 片 截图 为 原始 大 小 ， 左 侧 图 片 截 图 为 缩小 后 的 效果 ， 右 侧 图 片 截 
图 为 放大 后 的 效果 。 


6.3 图 片 放 大 镜 特 效 


在 HTML 网 页 图 片 设计 中 ， 还 有 一 种 非常 流行 的 图 片 放 大 镜 特效 。 虽 然 图 片 放 大 镜 特效 与 前 
文中 介绍 的 图 片 比例 缩放 特效 有 些 类 似 ， 但 是 二 者 的 实现 方法 还 是 有 区 别 的 。 下 面 介绍 一 个 通过 
JavaScript 实现 图 片 放大 镜 特效 的 代码 实例 。 


【代码 6-3】( 详 见 源 代码 目录 ch06jjs-img-zoom.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 
03 <head> 
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04 <!-- 添加 文档 头 部 内 容 --> 
05 <title>JavaScript 全 程 实例 </title> 
06 </head> 
07 <body> 
08 <!-- 添加 文档 主体 内 容 --> 
09 <header> 
10 <nav>JavaScript 图 片 特效 - 图 片 放大 镜 特效 </nav> 
11 </header> 
12 <!-- 添加 文档 主体 内 容 --> 
13 <div class="small-box" id="smallBox"> 
14 <img src="images/js-zoom.jpg"/> 
<div class="tool" id="tool"></div> 
16 </div> 
17 <div class="big-box" id="bigBox"> 
18 <img src="images/js-zoom.jpg" id="bigImg"/> 
19 </div> 
20 </body> 
21 <script type="text/javascript"> 
22 Var smallBox = document .getElementById("smal1Box"); // TODO: smallBox 
23 Var tool = document .getElementById("tool1l"); // TODO: tool 
24 var bigBox = document .getElementById ("bigBox"); // TODO: bigBox 
25 var bigImg = document .getElementById ("bigImg"); 
26 Va 
2 了 7 * 鼠标 进入 smallBox 区 域内 ， 显 示 tool 区 域 和 bigBox 区 域 
28 
2 smallBox.onmouseenter = function () { 
30 tool.className = "tool active"; 
31 bigBox.className = "big-box active"; 
32 ; 
33 Ud 
34 * 鼠标 离开 smallBox 区 域 ， 不 显示 tool 区 域 和 bigBox 区 域 
35 区 
36 smallBox.onmouseleave = function () { 
37 tool.className = "tool"; 
38 bigBox.className = "big-box"; 
39 Ps 
40 WR 
41 * 鼠标 在 smal1Box 内 移动 
42 Rh 
43 smallBox.onmousemove = function (e) { 
44 var _e = window.event || e;// 事 件 对 象 
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45 var x = _e.clientX - this.offsetLeft - tool.offsetWidth / 2; 
46 var y = _e.clientY - this.offsetTop - tool.offsetHeight / 2; 
47 if (x < Ot 

48 x = 0;// 当 左 偏 移出 小 盒子 时 ， 设 为 0 

49 了 

50 | 

5 Y = 0;// 当 上 偏 移出 小 盒子 时 ， 设 为 0 

le } 

53 if (x > this.offsetWidth - tool.offsetWidth) { 
54 x = this.offsetWidth - tool.offsetWidth; 

本 } 

56 if (y > this.offsetHeight - tool.offsetHeight) { 
5 y = this.offsetHeight - tool.offsetHeight; 

58 } 

59 tool.style.left = x + "px"; 

60 tool.style.top = y + "px"; 

61 bigImg.style.left = -x * 2 + "px"; 

62 bigImg.style.top = -~y * 2 + "px"; 

63 }; 

64 </script> 

65 </html> 


关于 【代码 6-3】 的 说 明 : 

@ 第 13~16 行 代码 通过 <div> 标 签 元 素 定 义 了 一 个 小 盒子 (id="smallBox" )， 用 于 显示 原始 的 小 
图 片 。 其 中 ， 第 14 行 代码 通过 <img> 标 签 元 素 定 义 了 该 原始 图 片 ; 第 15 行 代 码 通过 <div> 标 
签 元 素 定义 了 一 个 工具 区 (id="tool" )， 用 于 显示 鼠标 在 图 片上 移动 时 的 一 个 黄色 区 域 。 

@ 第 17~19 行 代码 通过 <div> 标 签 元 素 定义 了 一 个 大 盒子 (id="bigBox" ), 用 于 显示 放大 镜 图 片 。 
其 中 ， 第 18 行 代码 通过 <img> 标 签 元 素 定义 了 该 放大 的 图 片 。 

@ 第 29~32 行 代码 定义 了 小 盒子 (id="smallBox" ) 的 筷 标 进入 onmouseenter 事件 处 理 方法 。 
其 中 ， 第 30 行 和 第 31 行 代码 分 别 激活 了 工具 区 (id="tool" ) 和 大 盒子 (id="bigBox'" ) 区 域 。 

@ 对 应 的 ， 第 36~39 行 代码 定 义 了 小 盒子 (id="smallBox" ) 的 鼠标 离开 onmouseleave 事件 处 
理 方法 。 其 中 , 第 37 行 和 第 38 行 代 码 分 别 禁 用 了 工具 区 (id="tool" ) 和 大 念 子 (id="bigBox" ) 
区 域 。 

@ 第 43~63 行 代码 定 义 了 小 盒子 (id="smallBox" ) 的 鼠标 移动 onmousemove 事件 处 理 方法 ， 
通过 窗口 客户 区 坐标 (clientX 和 clientY ) 属性 、 相 对 偏 移 量 (offsetLeft 和 offsetTop ) 属性 
和 控件 宽 高 尺寸 (offsetWidth 和 offsetHeight) 属性 ， 计 算出 工具 区 (id="tool" ) 相对 小 盒子 

(id="smallBox" ) 的 位 置 ， 并 在 大 盒子 (id="bigBox" ) 中 显示 图 片 放 大 镜 特效 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 6.2 所 示 。 
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图 6.2 ”JavaScript 实现 图 片 放 大 镜 特 效 


6.4 ”图 片 在 层 里 居中 


在 一 些 HTML 网 页 图 片 设计 的 场景 中 ， 将 图 片 设置 为 居中 显示 也 是 很 常见 的 。 获 取 图 片 尺寸 
属性 并 通过 计算 得 出 图 片 在 父 级 层 元 素 中 的 定位 , 实现 图 片 在 层 里 居中 显示 的 效果 。 下 面 介绍 一 个 
通过 JavaScript 实现 让 图 片 在 层 里 居中 显示 的 代码 实例 。 


【代码 6-4】( 详 见 源 代码 目录 ch06-js-img-div-centerhtml 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 图 片 特 效 - 图 片 在 层 内 居中 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center"> 

14 <img src="images/js-center.jpg" id="id-img"/> 
15 </div> 

16 </body> 

17 <script type="text/javascript"> 


18 window.onload = function () { 
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1% 
20 
2 
22 
3 
24 
25 
26 
2 
28 


var 
var 
var 
Var 
Var 


var 


imgCenter = document .getElementById('id-img'); 
width = imgCenter.width; 

height = imgCenter.height; 

divCenter = imgCenter.parentNode; 

widthOffset = divCenter.offsetWidth; 
heightOffset = divCenter.offsetHeight; 


imgCenter.style.margin = '0 auto'; 


var 


padding = (heightOffset - height) / 2; 


divCenter.style.paddingTop = (32 + padding)+'px'; 


29 </script> 


30 


</html> 


关于 【代码 6-4】 的 说 明 : 

@ 第 13~15 行 代码 通过 <div> 标 签 元 素 定义 了 一 个 层 (id="id-div-center" )。 其 中 ， 第 14 行 代码 
通过 <img id="id-img"> 标 签 元 素 定义 了 一 幅 图 片 ， 目 的 是 让 该 图 片 在 层 (id="id-div-center" ) 
内 居中 显示 。 


第 18 ~ 28 行 代码 实现 了 在 页 面 初始 化 过 程 中, 让 图 片 在 层 内 居中 显示 的 效果 ; 具体 是 通过 获 


取 图 片 (id="id-img" ) 的 宽 高 尺寸 属性 (width 和 Height ) 数值 和 层 (id="id-div-center" ) 宽 
高 尺寸 属性 (offsetWidth 和 offsetHeight ) 数值 ， 计 算得 出 图 片 在 层 内 居中 显示 的 相对 位 置 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 


如 图 6.3 中 箭头 所 示 ， 图 片 在 外 层 层 框 〈 黑 实 线 ) 内 的 显示 位 置 是 居中 的 。 


Ble Edt View History Bookmarks Iools Hep 一 


区 
国 /avascript 全 生 实 全 x jt B | 
GC © localhost63 忠 | 。… 全 | 次 | 三 


JavaScript 图 片 特效 - 图 片 在 层 内 居中 


< 一 
JavaScript 


在 层 内 居中 显示 


6.3 JavaScript 实现 图 片 在 层 里 居中 


具体 效果 如 图 6.3 所 示 。 
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6.5 让 图 片 自 适应 框 的 大 小 


在 HTML 网 页 设计 中 ， 除 了 6.4 节 介绍 的 图 片 居中 显示 效果 ， 还 有 一 种 让 图 片 自 适应 框 的 大 
小 也 很 常见 。 下 面 介 绍 一 个 通过 JavaScript 实现 让 图 片 自 适 应 框 的 大 小 的 代码 实例 。 


【代码 6-5】 ( 详 见 源 代 j adjust.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 图 片 特效 - 图 片 自 适 应 框 的 大 小 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <img src="images/js-adjust.jpg"/> 

14 <div id="id-div-adjsut1"> 


15 <img src="images/js-adjust.jpg" id="id-imgl"/> 

16 </div> 

17 <div id="id-div-adjsut2"> 

18 <img src="images/js-adjust.jpg" id="id-img2"/> 

19 </div> 

20 </body> 

21 <script type="text/javascript"> 

22 window.onload = function () { 

23 var imgl = document .getElementById('id-imgl')7 
24 adjsutImgFitDiv (img1); 

pd var img2 = document .getElementById('id-img2'); 
26 adjsutImgFitDiv (img2); 

旭光 > 

28 光宇 全 

公 * Rdjust img to fit div 

30 * @param img 

3 EW 

32 function adjsutImgFitDiv(img) { 

33 var div = img.parentNode; 


34 var Ww = div.offsetWidth; 
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号 区 var h = div.offsetHeight; 
36 img.width =w - 2; 

37 img.height =h - 2; 

38 ， 

39 </script> 

40 </html> 


关于 【代码 6-5】 的 说 明 : 
@ 第 13 行 代码 通过 <img> 标 签 元 素 定义 了 一 幅 图 片 ， 用 于 显示 原始 图 片 。 
@ 第 14 ~ 16 行 代 码 通 过 <div id="id-div-adjsut1"> 标 签 元 素 定义 了 一 个 放大 的 层 框 
(id="id-div-adjsut1" )。 其 中 ， 第 15 行 代码 通过 <img id="id-img1"> 标 签 元 素 引 用 了 上 面 的 原 
始 图 片 ， 目 的 是 让 图 片 自 适应 这 个 放大 的 层 框 。 
e@ 相应 的 ， 第 17 ~ 19 行 代码 通过 <div id="id-div-adjsut2"> 标 签 元 素 定义 了 一 个 缩小 的 层 框 
(id="id-div-adjsut2" )。 其 中 ， 第 18 行 代码 通 过 <img id="id-img1"> 标 签 元 素 同样 引用 了 上 面 
的 原始 图 片 ， 目 的 是 让 图 片 自 适应 这 个 缩小 的 层 框 。 
@ 第 32~38 行 代码 实现 了 一 个 自 定义 函数 (adjsutImgFitDiv() )， 用 于 实现 让 图 片 自 适应 层 框 的 
算法 。 其中， 第 34 ~35 行 代码 通过 获取 层 框 (id="id-div-center" ) 宽 高 尺寸 属性 ( offsetWidth 
和 offsetHeight ) 数值 ， 重 新 设 定 图 片 的 宽 高 尺寸 ( 注意 尺寸 的 小 幅 修正 量 )。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 6.4 所 示 。 
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Javascript 图 片 特效 - 图 片 自 适应 框 的 大 小 
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图 6.4 JavaScript 实现 让 图 片 自 适应 框 的 大 小 


如 图 6.4 中 的 标识 所 示 ，, 页 面 最 上 面 是 原始 图 片 ， 中 间 是 图 片 自 适 应 放大 层 框 的 效果 ， 下 面 是 
图 片 自 适应 缩小 层 框 的 效果 。 
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6.6 为 图 片 加 上 边框 


在 HTML 网 页 设计 中 ， 可 以 为 图 片 自 定义 边框 样式 ， 主 要 是 边框 的 颜色 和 厚度 。 下 面 介 绍 一 
个 通过 JavaScript 实现 为 图 片 加 上 边框 的 代码 实例 。 


【代码 6-6】 ( 详 见 源 代码 目录 ch06j 


01 <!doctype html> 
02 <htm1l lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 图 片 特效 - 为 图 片 加 上 边框 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-border"> 


14 边框 颜色 : snbsp; snbsp; 

15 <select id="id-sel-color" onchange="on sel color changed(this.id);"> 
16 <option value="none" selected>None</option> 

37 <option value="black">Black</option> 

18 <option value="red">Red</option> 

19 <option value="blue">Blue</option> 

20 </select> 

21 边框 厚度 : snbsp; snbsp; 

22 <select id="id-sel-width" onchange="on sel width changed(this.id);"> 
29 <option value="0" selected>0</option> 

24 <option value="1">1</option> 

25 <option value="2">2</option> 

26 <option value="3">3</option> 

加 </select> 

28 <img src="images/js-border.jpg" id="id-img"/> 

29 </div> 

30 </body> 

31 <script type="text/javascript"> 

32 We 

33 * select image border color 


34 * @param thisid 
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35 要 几 

36 function on sel color changed(thisid) { 

cg Var selColor = document .getElementById (thisid); 
38 Var color = selColor.value; 

39 Var selWidth = document .getElementById('id-sel-width'); 
40 var width = selWidth.value; 

41 setImageBorder (width，color) 

42 } 

43 Je 

44 * select image border width 

45 * @param thisid 

46 站 六 

47 function on sel width changed(thisid) { 

48 var selWidth = document .getElementById (thisid) 
49 var width = selWidth.value; 

50 var selColor = document .getElementById('id-sel-color'); 
51 Var color = selColor.value; 

号 之 setImageBorder (width, color); 

3 } 

54 dy 

5 * set image border style 

56 * Q@param width 

57 * @param color 

58 多 

59 function setImageBorder (width，color) { 

60 Var img = document .getElementById("id-img"); 

61 if(width == "0" || color == "none") { 

62 img.style.border = ""; 

63 } else { 

64 img.style.border = width + 'px solid ' + color; 
65 上 

66 和 

67 </script> 

68 </html> 


关于 【代码 6-6】 的 说 明 : 

@ 第 15~20 行 和 第 22~27 行 代码 分 别 通 过 <selec 人 > 标签 元 素 定义 了 两 个 下 拉 列 表 框 , 并 添加 了 
onchange 事件 处 理 方 法 ， 用 于 选择 图 片 边框 颜色 和 厚度 。 

ee 第 28 行 代码 通过 <img id="id-img"> 标 签 元 素 定义 了 一 幅 图 片 ， 用 于 测试 为 图 片 添加 边框 的 操作 。 

@ 第 36~42 行 和 第 47 ~ 53 行 代码 分 别 实现 了 边框 颜色 和 边框 厚度 这 两 个 下 拉 列 表 框 的 
onchange 事件 处 理 方法 ， 用 于 获取 用 户 选择 的 颜色 值 和 厚度 值 ， 然 后 通过 调用 自 定义 函数 
setImageBorder(0 来 设 定 图 片 边框 的 颜色 和 厚度 样式 。 
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@ 第 59~66 行 代码 是 自 定义 函数 setImageBorder() 的 实现 过 程 ， 先 判断 用 户 选 择 的 边框 颜色 或 
厚度 是 否 有 效 (只 要 厚度 为 "0" 或 颜色 为 "none" 这 两 个 条 件 有 一 个 成 立 ， 就 表示 图 片 边框 样式 
无 效 )， 再 通过 设 定 图 片 Style 对 象 的 border 属性 来 改变 图 片 颜色 和 边框 的 样式 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 6.5 所 示 。 
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图 6.5 JavaScript 实现 为 图 片 加 上 边框 
图 6.5 中 的 4 个 页 面 依次 显示 了 图 片 边框 在 不 同 颜色 值 和 不 同 厚度 值 下 的 效果 。 


6.7 显示 局 部 图 片 


其 实 每 一 幅 图 片 在 HTML 页 面 窗口 中 都 是 有 定位 尺寸 的 ， 通 过 对 该 定位 尺寸 进行 变换 计算 ， 
就 可 以 选取 图 片 的 某 一 个 局 部 ， 并 在 页 面 中 进行 显示 。 下 面 看 一 个 通过 JavaScript 实现 显示 局 部 图 
片 的 代码 实例 。 


【代码 6-7】( 详 见 源 代码 目录 ch06-js-img-part.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 
03 <head> 
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04 
05 
06 
07 
08 
09 
10 
村 
12 
3 
14 
15 
16 
7 
18 
19 


20 
21 
22 
Fe 
24 
25 
4 
27 
28 
29 
30 
31 
G2 
33 
34 
35 
36 


<!-- 添加 文档 头 部 内 容 --> 
<title>JavaScript 全 程 实例 </title> 
</head> 
<style type="text/css"> 


div#id-div-img { 
background: url('images/js-part.jpg') 0 0 no-repeat; 
} 
</style> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 图 片 特效 - 显示 局 部 图 片 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 


<div id="id-div-center"> 


<input type="button" value=" 切 换 显示 局 部 图 片 " 
onclick="showImagePart ();"/> 
</div> 
<div id="id-div-img"></div> 


</body> 
<script type="text/javascript"> 


war are we TiOr Ol [=150% Ol [=1507 =L501y [Or -TSO 
Var index = 0; 
function showImagePart() { 
var img = document .getElementById('id-div-img'); 
index++7 
if (index == 4) 
index = 0; 
var x = arr[index] [0] + 'px'; 
var y = arr[index] [1] + 'px'; 
img.style.backgroundPosition =x+' 1 +Y; 
下 
</script> 
</html> 


关于 【代码 6-7】 的 说 明 : 
@ 第 21 行 代码 通过 <div id=-"id-div-img"> 标 签 元 素 定义 了 一 个 层 ， 该 元 素 看 似 是 一 个 空 层 ， 其 
实 不 然 。 请 读者 仔细 看 第 08 ~ 10 行 代码 定义 了 的 CSS 样式 代码 ， 第 09 行 代 码 通过 背景 


background 样式 属性 为 层 <div id="id-div-img"> 元 素 定义 了 背景 图 片 。 


@ 第 19 行 代码 通过 <input> 标 签 元素 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方法 


(showImagePart() )， 用 于 测试 “切换 显示 局 部 图 片 ”的 操作 。 


@ 第 24 行 代码 定义 了 一 个 数组 坐标 (arr )， 标 记 局 部 图 片 的 定位 坐标 。 
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e@ 第 25 行 代码 定义 了 一 个 变量 (index )， 用 于 数组 坐标 (ar ) 下 标的 索引 。 
@ 第 26~ 34 行 代码 是 事件 处 理 方法 (showImagePart() ) 的 实现 过 程 , 通过 依次 将 数组 坐标 (arr) 
项 的 值 赋 给 图 片 Style 对 象 的 backgroundPosition 属性 来 实现 切换 显示 局 部 图 片 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 6.6 所 示 。 
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图 6.6 JavaScript 实现 切换 显示 局 部 图 片 
如 图 6.6 中 箭头 方向 所 示 ， 页 面 中 分 别 演示 了 “切换 显示 局 部 图 片 ”操作 的 效果 。 


6.8 动态 加 载 图 片 


在 HTML 网 页 图 片 设 计 中 ， 动 态 加 载 图 片 是 一 项 很 实用 的 技术 。 在 大 型 项 目 开 发 中 ， 网 页 图 
片 资源 的 数量 往往 是 很 庞大 的 , 如 果 图 片 全 部 采用 静态 加 载 的 方式 是 非常 耗费 网 络 资源 的 , 而 且 用 
户 体验 也 会 很 糟糕 。 通 过 动态 加 载 图 片 的 方式 ,在 实际 需要 时 将 图 片 进行 加 载 显示 就 很 合理 ， 用 户 
体验 也 会 得 到 提升 。 下 面 看 一 个 通过 JavaScript 实现 动态 加 载 图 片 的 代码 实例 。 
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【代码 6-8】( 详 见 源 代 码 目录 ch06-js-img-dyn-load.html 文件 ) 


01 <!doctype html> 
02 <htm1l lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 图 片 特效 - 动态 加 载 图 片 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-center"> 


14 <input type="button"” value=" 动 态 加 载 医 
onclick="dynLoadImg (this.id);"/> 

15 <img lazy_src="images/js-dyn-load.jpg" src="" alt=" 图 片 未 加 载 " 

id="id-img"/> 

16 </div> 

17 </body> 

18 <script type="text/javascript"> 

19 WS 

20 * dynamic load image 

hl * @param thisid 

2 dd 

23 function dynLoadImg (thisid) { 

24 Var img = document .getElementById('id-img'); 

25 img.src = img.attributes['lazy src'] .value; 

26 } 

27 </script> 

28 </html> 


关于 【代码 6-8】 的 说 明 : 
@ 第 14 行 代 码 通 过 <input> 标 签 元 素 定义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方法 
(dynLoadImg() )， 用 于 测试 “动态 加 载 图 片 ”的 操作 。 

@ 第 15 行 代码 通过 <img> 标 签 元 素 定义 的 图 片 是 关键 所 在 ， 注 意 其 src 属性 值 为 空 ( 页面 初始 
化 加 载 时 是 无 图 片 的 )， 而 增加 了 一 个 自 定义 属性 lazy_src， 其 属性 值 引用 了 想 要 动态 加 载 的 
图 片 路 径 。 

@ 第 23~26 行 代码 是 事件 处 理 方法 (dynLoadImg() ) 的 实现 过 程 ， 通 过 图 片 对 象 的 attributes 
属性 获取 自 定 义 属 性 lazy_src 的 值 ， 然 后 赋 给 src 属性 ， 从 而 实现 动态 加 载 图 片 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 6.7 所 示 。 
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6.7 JavaScript 实现 动态 加 载 图 片 


6.9 延迟 加 载 图 片 


6.8 节 中 介绍 的 动态 加 载 图 片 是 一 项 很 有 用 的 技术 ， 不 过 仍 需要 人 工 来 操作 ， 不 太 适 用 于 页 面 
的 加 载 过 程 。 在 网 页 图 片 资源 的 数量 很 庞大 、 要 避免 全 部 采用 静态 加 载 方式 引起 阻塞 的 情况 下 ， 可 
以 通过 自动 延迟 加 载 图 片 的 方式 来 解决 问题 。 具 体 来 讲 ， 就 是 通过 计时 器 设 定时 间 延 迟 ， 然 后 使 用 
动态 加 载 技术 来 完成 图 片 的 加 载 。 下 面 看 一 个 通过 JavaScript 实现 延迟 加 载 图 片 的 代码 实例 。 


【代码 6-9】( 详 见 源 代码 目录 ch06jjs-img-delay-load.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 图 片 特 效 - 延迟 加 载 图 片 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center"> 

14 <img lazy_src="images/js-delay-load.jpg" src="" alt=" 图 片 正在 加 载 . . ." 
id="id-img"/> 

5 </odiy> 

16 </body> 

17 <script type="text/javascript"> 
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18 var timer = null;  // TODO: 计时 器 

19 window.onload = function (ev) { 

20 timer = setTimeout (image delay load, 3000); 
21 

22 人 

23 * image delay load 

24 

2 function image delay load() { 

26 Var img = document .getElementById('id-img'); 
| img.src = img.attributes['lazy src'] .value; 
28 timer = null; 

29 } 

30 </script> 

31 </html> 


关于 【代码 6-9】 的 说 明 : 

@ 第 14 行 代码 通过 <img> 标 签 元 素 定义 了 一 幅 图 片 ， 用 于 测试 延迟 加 载 操 作 ， 其 src 属性 值 为 
室 (页 面 初始 化 加 载 时 是 无 图 片 的 )， 同时 增加 了 一 个 自 定义 属性 lazy srce， 其 属性 值 引用 了 
想 要 延迟 加 载 的 图 片 路 径 。 
第 18 行 代码 定义 了 一 个 变量 (timer )， 作 为 计时 器 使 用 。 
第 20 行 代码 在 页 面 加 载 过 程 中 , 通过 setTimeout() 方 法 启动 了 一 个 计时 器 (timer )， 回 调 方法 
为 image delay _ load， 延迟 时 间 设 定 为 3000ms。 

@ 第 25~29 行 代码 是 计时 器 回调 方法 (image _delay_ load ) 的 实现 过 程 ,通过 图 片 对 象 的 attributes 
属性 获取 自 定义 属性 lazy_src 的 值 ， 然 后 赋 给 src 属性 ; 计时 器 回调 方法 会 在 设 定 的 延迟 时 间 

(3000ms ) 完成 后 被 调用 ， 从 而 实现 了 延迟 加 载 图 片 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 6.8 所 示 。 
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图 片 延 退 加 载 后 的 效果 


6.8 JavaScript 实现 延迟 加 载 图 片 
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6.10 重新 加 载 验 证 码 图 片 


在 HTML 注册 登录 类 网 页 设计 中 ， 图 片 验 证 码 方式 已 经 是 一 种 主流 技术 解决 方案 了 。 使 用 图 
片 验证 码 可 以 有 效 避 免 某 些 恶 意 注册 的 行为 , 有 效 提高 网 站 使 用 的 安全 性 。 不 过 ,由 于 图 片 验证 码 
是 通过 纯 JavaScript 脚本 语言 算法 模拟 生成 的 ， 因 此 有 时 也 会 出 现 迷糊 不 清和 字体 过 小 的 问题 ， 此 
时 就 需要 重新 加 载 验证 码 图 片 ， 直 到 清晰 可 视 为 止 。 

下 面 看 一 个 通过 JavaScript 模拟 实现 重新 加 载 验证 码 图 片 的 代码 实例 。 


【代码 6-10】( 详 见 源 代码 目录 ch06-js-img-reload-verify.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 重 新 加 载 验证 码 图 片 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <xdiv id="id-div-center"> 

14 <input type="button" value=" 重 新 加 载 验证 码 图 片 " 
onclick="reloadVerityCode (this.id);"/> 


15 <img src="images/verifycode.01.jpg" alt=" 图 片 未 加 载 " id="id-img" 
16 lazy_src_1="images/verifycode.01.jpg" 

37 lazy_src 2="images/verifycode.02.jpg" 

18 lazy_src 3="images/verifycode.03.jpg" 

19 > 

20 </div> 

21 </body> 

22 <script type="text/javascript"> 

23 Var index = 17 

24 Pts 

25 * reload verify code image 

26 * @param thisid 

2 

28 function reloadVerityCode (thisid) { 

29 Var img = document .getElementById('id-img'); 


30 index++; 
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3 if(index > 3) 

32 index = 17 

3 img.src = img.attributes['lazy src ' + index.toString()] .value; 
34 } 

35 </script> 

36 </html> 


关于 【代码 6-10】 的 说 明 : 
@ 第 14 行 代码 通过 <inpu 人 > 标签 元 素 定义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方法 
(reloadVerityCode0 )， 用 于 测试 “重新 加 载 验证 码 图 片 ”的 操作 。 

@ 第 15~19 行 代码 通过 <img> 标 签 元 素 定义 的 图 片 是 关键 所 在 。 注 意 ， 第 16 ~ 18 行 代 码 增加 
了 一 组 自 定义 属性 (lazy src_ 1、lazy src 2 和 1lazy src 3 )， 其 属性 值 引用 了 想 要 重新 加 载 的 
图 片 验证 码 路 径 。 

@ 第 28~34 行 代码 是 事件 处 理 方法 ( reloadVerityCode() ) 的 实现 过 程 , 通过 图 片 对 象 的 attributes 
属性 获取 自 定义 属性 (lazy_sre_1、lazy_sre 2 和 1lazy_src 3 ) 的 值 ， 然 后 赋 给 src 属性 ， 从 而 
实现 重新 加 载 验证 码 图 片 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 6.9 所 示 。 
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图 6.9 JavaScript 实现 重新 加 载 验证 码 图 片 
图 6.9 所 示 的 3 个 页 面 演示 了 “重新 加 载 验证 码 图 片 ” 操 作 的 效果 。 
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本 章 介绍 如 何 通过 JavaScript 来 实现 文本 框 和 下 拉 列 表 框 的 各 种 特效 ， 通 过 这 些 特效 来 丰富 
HTML 表单 的 设计 手段 和 展示 效果 。 


7.1 文本 框 和 下 拉 列 表 框 概述 


文本 框 和 下 拉 列 表 框 是 HTML 表单 中 使 用 频率 很 高 的 元 素 : 文本 框 可 以 用 来 接受 用 户 输入 的 
信息 ; 下 拉 列 表 框 可 以 提供 给 用 户 若干 个 可 供 选择 的 选项 数据 ， 都 是 非常 实用 的 表单 控件 。 

在 HTML 表单 中 ， 通 过 使 用 <input> 标 签 元 素来 定义 文本 框 ， 通 过 使 用 <select> 标 签 元 素来 定 
义 下 拉 列 表 框 。 

文本 框 的 语法 格式 如 下 : 


/** 文本 框 定义 */ 


<input type="text|passwordlemail.." /> 


其 中 ，type 属性 是 必需 的 ， 用 于 指定 文本 框 的 类 型 ， 比 如 "text" 表 示 普 通 的 文本 输入 框 、 
"password" 表 示 密 码 输 入 框 、"email" 表 示 Email 电子 邮件 格式 输入 框 等 。 
下 拉 列 表 框 的 语法 格式 如 下 : 


/** 下 拉 列 表 框 定义 */ 


<select> 


<option></option> 
<option></option> 


</select> 


其 中 ，<option> 标 签 用 于 定义 下 拉 列 表 框 的 选项 。 

通过 JavaScript 脚本 语言 可 以 为 文本 框 和 下 拉 列 表 框 实现 多 种 特效 ， 比 如 只 带 下 划 线 的 文本 
框 、 默认 大 小 写 的 文本 框 、 动态 添加 和 删除 下 拉 选 项 、 多 级 联动 下 拉 列 表 框 、 可 输入 的 下 拉 列 表 框 、 
带 格式 校 验 的 文本 框 等 。 后 续 将 为 读者 介绍 多 种 文本 框 和 下 拉 列 表 框 特效 的 代码 实例 。 
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7.2 只 带 下 划 线 的 文本 框 


在 HTML 表单 中 ， 文 本 框 默 认 样式 都 是 带 有 四 条 黑色 方形 边框 的 ， 在 网 页 中 这 个 样式 是 没有 
问题 的 。 但 是 ， 如 果 将 HTML 表单 打印 出 来 的 话 ， 文 本 框 的 四 条 黑色 方形 边框 样式 就 会 显得 很 突 
无, 远 没有 Word 文档 中 只 带 有 下 划 线 文本 框 样式 的 体验 好 。 那 么 ,， HTML 表单 能 不 能 设计 出 只 带 
下 划 线 的 文本 框 呢 ? 其 实 ， 只 要 通过 设 定 文本 框 Style 对 象 的 border 属性 就 可 以 实现 。 

下 面 介绍 一 个 通过 JavaScript 实现 只 带 下 划 线 的 文本 框 的 代码 实例 。 


【代码 7-3】( 详 见 源 代码 目录 ch07jjs-input-underline.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 只 带 下 划 线 的 文本 框 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center"> 

14 只 带 下 划 线 的 文本 框 : snbsp; snbsp; <input type="text" value="" 
id="id-input-underline" /> 


15 </div> 
16 </body> 
17 <script type="text/javascript"> 
18 
19 * 初始 化 只 带 下 划 线 的 文本 框 
20 * @param ev 
2 
22 window.onload = function (ev) { 
23 var inputUnderline = document .getElementById("id-input-underline"); 
24 inputUnderline.style.borderColor = 'black'; 
// TODO: 设置 边框 颜色 
25 inputUnderline.style.borderStyle = 'solid'; 
// TODO: 设置 边框 样式 为 实 线 
26 inputUnderline.style.borderWidth = '0 0 lpx 0'7 


// TODO: 设置 边框 大 小 ，0 代表 无 
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28 </script> 
29 </html> 


关于 【代码 7-3】 的 说 明 : 

@ 第 14 行 代码 通过 <input> 标 签 元 素 定 义 了 一 个 文本 框 ， 用 于 实现 “只 带 下 划 线 的 文本 框 "。 

@ 第 24~26 行 代码 通过 分 别 设 定 文本 框 Style 对 象 的 边框 颜色 borderColor、 边 框 样式 borderStyle 
和 边框 厚度 borderWidth 属性 值 实现 了 只 带 下 划 线 的 文本 框 样式 .比较 关键 的 是 第 26 行 代码 
定义 的 边框 厚度 borderWidth 属性 ，“0 0 1px 0” 数 值 组 合 分 别 表 示 “ 上 、 右 、 下 、 左 ”四 条 
边框 的 厚度 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 , 具体 效果 如 图 7.1 所 示 。 页 面 中 的 文本 框 (用 
户 输 入 内 容 : 1234567890) 是 只 带 有 下 划 线 样式 的 。 
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图 7.1 JavaScript 实现 只 带 下 划 线 的 文本 框 


7.3 ”用 正则 表达 式 验证 Email 格式 


随 着 HTML 5 标准 规范 的 推出 ， 只 要 使 用 <input type="email"> 标 签 类 型 来 定义 文本 框 , 就 可 以 
支持 Email 格式 的 验证 了 。 在 早期 HTML 标准 规范 中 ， 如 果 想 验证 用 户 输入 的 Email 格式 是 否 正 
确 ， 就 需要 使 用 JavaScript 正则 表达 式 功 能 来 实现 了 。 随 着 技术 标准 的 不 断 进步 ，JavaScript 设计 
开发 的 门槛 越 来 越 低 , 早期 需要 手动 编写 代码 来 实现 的 功能 , 现在 设计 人 员 直 接 使 用 新 的 标准 规范 
就 可 以 完成 了 。 不 过 , 这 并 不 等 于 不 需要 设计 人 员 去 了 解 掌握 相关 技术 的 实现 原理 , 相信 大 多 数 读 
者 是 支持 这 个 观点 的 。 

下 面 介绍 一 个 通过 JavaScript 实现 用 正则 表达 式 验 证 Email 格式 的 代码 实例 。 


【代码 7-4】( 详 见 源 代码 目录 ch07-js-input-regex-email.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 
04 <!-- 添加 文档 头 部 内 容 --> 
05 <title>JavaScript 全 程 实例 </title> 


06 </head> 
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07 
08 
09 
10 
11 
12 
13 
14 


15 
16 
1 
18 
19 
20 
21 
22 
| 
24 
25 


26 
| 
28 


29 
30 
3 
32 
33 
34 
35 
36 


<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav> 用 正则 表达 式 验证 Email 格式 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 


<div id="id-div-center"> 
请 输入 Email:<input type="text" id="id-input-email" 
onblur="validateEmail (this.id)"/> 
验证 结果 :<input type="text" id="id-input-result" readonly> 
</div> 


</body> 
<script type="text/javascript"> 
/** 
* validate email format 
* @param thisid 
st 
function validateEmail (thisid) { 
var inputResult = document .getElementById("id-input-result"); 
Var inputEmail = document .getElementById (thisid); 
// TODO: 获 得 文本 框 的 DOM 
var email = inputEmail.value;  // TODO: 获得 用 户 输入 的 Email 
// TODO: 定义 正则 表达 式 
var regexEmail = /*(la-zA~20-9 =])+@([la=ZA=20=9 =])+ 
((\.[a-zA-20-9 -]{2,3}) {1,2})$/; 
if (regexEmail.test(email)) { 
inputResult .value = "Email 校 验 通 过 ."; 
HorLser 
inputResult .value = "Email 校 验 失败 , 请 检查 输入 格式 ."; 
3 
} 
</script> 
</html> 


关于 【代码 7-4】 的 说 明 : 
@ 第 14 行 代码 通过 <input id="id-input-email"> 标 签 元 素 定义 了 一 个 文本 框 ， 并 定义 了 onblur 事 


件 处 理 方法 (validateEmail() )， 用 于 测试 “用 正则 表达 式 验证 Email 格式 ”的 过 程 。 


@ 第 15 行 代码 通过 <input> 标 签 元 素 定义 了 另 一 个 文本 框 ( 只 读 readonly 类 型 )， 用 于 显示 验证 


Email 格式 的 结果 。 
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e@ 第 23~34 行 代码 是 validateEmail() 方 法 的 实现 过 程 ， 关 键 是 第 28 行 代码 定义 的 正则 表达 式 
(regexEmail ); 第 29~33 行 代 码 通过 调用 正则 表达 式 ( regexEmail ) 对 象 的 test() 方 法 来 验证 
Email 格式 是 否 正 确 ， 然 后 将 验证 结果 显示 到 第 15 行 代码 定义 的 只 读 文本 框 中 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 7.2 所 示 。 
贺 ,avascipt 人 sx | 十 一 [= 国 Javascipt 人 x | 十 一 


CG © localhost 《为 | 三 GO Ilocalhost v … (分 


用 正则 表达 式 验证 Email 格式 用 正则 表达 式 验证 Email 格式 


请 给 和 Email [king@emaiLcom 瑚 给 和 Email 
验证 结果 ln 验证 结果 : Email 以 验 失败 ,请 检查 输入 格式 . 


图 7.2 JavaScript 实现 用 正则 表达 式 验 证 Email 格式 


如 图 7.2 中 箭头 所 示 , 在 文本 框 中 输入 正确 的 电子 邮件 地 址 (king@email.com) 后 , 提示 “Email 
校 验 通 过 ”了 。 而 再 将 输入 内 容 中 的 “@” 字 符 删除 后 , 提示 “Email 校 验 失败 , 请 检查 输入 格式 ”。 


7.4 首 字 母 或 全 部 字母 大 写 


在 一 些 文本 框 的 设计 场景 下 ， 需 要 将 用 户 输入 文本 的 首 字 母 或 全 部 字母 自动 强制 转换 为 大 写 
格式 ，JavaScript 语法 中 的 String 对 象 提供 了 一 个 toUpperCase() 方 法 来 进行 字母 大 写 转 换 。 下 面 就 
看 一 个 通过 JavaScript 实现 首 字母 或 全 部 字母 大 写 的 代码 实例 。 


【代码 7-5】( 详 见 源 代码 目录 ch07-jjs-input-alphabet-upper.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 首 字母 或 全 部 字母 大 写 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center"> 

14 全 部 字母 大 写 :<input type="text" id="id-input-first" 
onblur="allAlphabetUpper (this.id);" /> 
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首 字母 大 写 :<input type="text" id="id-input-all" 
onblur="firstAlphabetUpper (this.id);" /> 

16 </div> 

17 </body> 

18 <script type="text/javascript"> 

19 WS 

20 * Set all alphabet to upper case 

2 * @param thisid 

be 

23 function allAlphabetUpper (thisid) { 

24 var allAlpha = document .getElementById (thisid); 

2 var valAll = allAlpha.value; 

26 Var valNewAll = valAll .toUpperCase(); 

2 allAlpha.value = valNewAll; 

28 } 

29 pi 

30 * Set first alphabet to upper case 

于 * @param thisid 

2 人 

33 function firstAlphabetUpper (thisid) { 

34 Var firstAlpha = document .getElementById (thisid); 

35 var valFirst = firstAlpha.value; 

36 var firstUpper = valFirst.charAt (0) .toUpperCase(); 

3 Var valNewFirst = firstUpper + valFirst.substr(1, valFirst.length); 

38 firstAlpha.value = valNewFirst; 

3 } 

40 </script> 

41 </html> 


关于 【代码 7-5】 的 说 明 : 


@ 第 14 行 代码 通过 <input id="id-input-first"> 标 签 元 素 定义 了 第 一 个 文本 框 ， 并 定义 了 onblur 事 
件 处 理 方法 (allAlphabetUpper() )， 用 于 测试 “全 部 字母 转换 为 大 写 ” 的 方法 。 

@ 第 15 行 代码 通过 <input id="id-input-all"> 标 签 元 素 定义 了 第 二 个 文本 框 ， 并 定义 了 onblur 事 
件 处 理 方法 (firstAlphabetUpper() )， 用 于 测试 “ 首 字 母 转换 为 大 写 ” 的 方法 。 

@ 第 23~28 行 代码 是 allAlphabetUpper() 方 法 的 实现 过 程 ， 关 键 是 第 26 行 代码 通过 使 用 
toUpperCase() 方 法 实现 将 全 部 字母 转换 为 大 写 的 操作 。 

@ 第 33~39 行 代码 是 firstAlphabetUpper() 方 法 的 实现 过 程 ， 关 键 是 第 36 行 代码 先 通过 使 用 
charAt() 方 法 获取 首 字母 , 再 通过 使 用 toUpperCase() 方 法 实现 将 首 字 母 转换 为 大 写 的 操作 。 另 
外 ， 第 37 行 代码 通过 使 用 substr() 方 法 获取 了 除去 首 字母 之 后 的 全 部 字母 ， 然 后 将 大 写 首 字 
母 与 其 连接 到 一 起 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 7.3 和 图 7.4 所 示 。 
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国 Jevasciptsx | 十 一 国 Jevasciptsx 十 一 口 x 
和 人 > CC © loclhost 为 | 三 3 CQ © Iocalhost “ 鸭 | 三 
首 字母 或 全 部 字母 大 写 首 字母 或 全 部 字母 大 写 
S38 大 [MBBccoDEEFr 

首 字 母 大 写 


图 73 JavaScript 实现 全 部 字母 大 写 
如 图 7.3 中 箭头 所 示 ， 页 面 中 显示 了 “全 部 字母 转换 为 大 写 ” 的 效果 。 


图 ,evasciptsx | 十 一 口 X 加 ,evasciptsx | 十 一 口 

y CG © localhost 为 | 三 > CG © localhost ”» 三 
首 字母 或 全 部 字母 大 写 首 字母 或 全 部 字母 大 写 

全 部 字母 大 写 全 部 字母 大 写 | 

音字 母 大 写 [abcdef 曾 字 三 大写 |Abcdef| 


图 74 JavaScript 实现 首 字母 大 写 
如 图 7.4 中 箭头 所 示 ， 页 面 中 显示 了 “ 首 字 母 转换 为 大 写 ” 的 效果 。 


7.5 只 能 输入 数字 的 文本 框 


在 一 些 文本 框 的 设计 场景 下 ， 可 能 只 接受 用 户 的 输入 文本 为 纯 数字 格式 ， 那 么 通过 正则 表达 
式 就 可 以 实现 对 数字 格式 的 验证 。 下 面 就 看 一 个 通过 JavaScript 实现 只 能 输入 数字 的 文本 框 的 代码 
实例 。 


【代码 7-6】( 详 见 源 代码 目录 ch07jjs-input-regex-number.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 


09 <header> 
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10 <nav> 只 能 输入 数字 的 文本 框 </nav> 
11 </header> 
12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-center"> 


14 只 能 输入 数字 : <input type="text" id="id-input-number" 
onblur="validateNumber (this.id)"/> 

5 验证 结果 :<input type="text" id="id-input-result" readonly> 

16 </div> 

17 </body> 

18 <script type="text/javascript"> 

9 VS 

20 * validate number format 

A * @param thisid 

22 dp 

3 function validateNumber (thisid) { 

24 var inputResult = document.getElementById("id-input-result") 

25 var inputNum = document .getElementById (thisid); 

26 var valNum = inputNum.value; 

var regexNum = /\b[0-9]+\b/; 

28 if (regexNum.test(valNum)) { 

29 inputResult .value = "数字 格式 验证 通过 ."; 

30 } else { 

可 inputResult .value = "数字 格式 验证 未 通过 , 只 能 输入 数字 ."; 

3 } 

33 } 

34 </script> 

35 </html> 


关于 【代码 7-6】 的 说 明 : 


@ 第 14 行 代码 通过 <input id="id-input-number"> 标 签 元 素 定义 了 一 个 文本 框 ， 并 定义 了 onblur 
事件 处 理 方法 ( validateNumber() )， 用 于 测试 “只 能 输入 数字 的 文本 框 ”的 功能 。 
@ 第 15 行 代码 通过 <input> 标 签 元 素 定义 了 另 一 个 文本 框 ( 只 读 readonly 类 型 )， 用 于 显示 验证 
数字 格式 的 结果 。 
@ 第 23~33 行 代码 是 validateNumber() 方 法 的 实现 过 程 , 关键 是 第 27 行 代码 定义 的 正则 表达 式 
(regexXNum ); 第 28~32 行 代码 通过 调用 正则 表达 式 (regexNum ) 对 象 的 test() 方 法 来 验证 
数字 格式 是 否 正确 ， 然 后 将 验证 结果 显示 到 第 15 行 代码 定义 的 只 读 文本 框 中 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 7.5 所 示 。 

如 图 7.5 中 箭头 所 示 ， 在 文本 框 中 输入 文本 〈1234567890) 后 ， 提 示 “ 数 字 格 式 验证 通过 ”; 
在 文本 框 中 输入 文本 (1a2b3c) 后 ， 因 为 是 非 纯 数字 ， 所 以 提示 “数字 格式 验证 未 通过 ， 只 能 输入 
数字 ”。 
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GC © localhost “~ 


只 能 输入 数字 的 文本 框 


哗 给 和 数字: |1a2b3c 
验证 结果 : 数字 格式 验证 未 通过 ,只 能 输入 数字 . 


7.5 ”JavaScript 实现 只 能 输入 数字 的 文本 框 


7.6 判断 字符 的 个 数 


在 网 站 “留言 板 ” 或 “发 表 评 论 ” 的 页 面 中 ， 读 者 一 定 见 过 类 似 提示 信息 “还 可 以 继续 输入 
xx 个 字符 ”的 功能 设计 , 这 里 就 用 到 了 判断 用 户 输入 字符 个 数 的 算法 。 下 面 就 看 一 个 通过 JavaScript 
实现 判断 字符 支持 区 分 中 文字 符 ) 个 数 的 代码 实例 。 


【代码 7-7】( 详 见 源 代码 目录 ch07-js-input-count-charhtml 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 文本 框 特效 - 判断 字符 的 个 数 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-center"> 


14 请 输入 :<input type="text" id="id-input-count-char" 
onblur="countChar (this.id)"/> 

5 输出 :<input type="text" id="id-input-result" readonly> 

16 </div> 

17 </body> 

18 <script type="text/javascript"> 

19 这 二 全 

20 * 判断 字符 个 数 

2 工 * @param thisid 


忆 人 
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23 function countChar (thisid) { 

24 Var vResult = document .getElementById("id-input-result"); 

25 // 获 得 文本 框 的 DOM 

26 Var vInput = document .getElementById (thisid); 

4 Var VText = vInput.value; 

28 var sumTotal = 0, sumEn = 0, sumCh = 0; 

29 sumTotal = vText.length; 

30 for (var i = 0; i < sumTotal; i++) { 

31 var C = vText.charAt (i); 

2 if (isChineseChar(c)) { 

33 sumCh++; 

34 } else { 

95 sumEn++; 

36 } 

3 1 

38 VvResult.value = "共计 " + sumTotal + "个 字符 , 汉字 字符 为 " + sumch + 
"个 , 非 汉字 字符 为 " + sumEn + "个 ."; 

39 } 

40 We 

41 * 判断 汉字 字符 个 数 

42 * @param c 

43 * Q@returns {boolean} 

44 全 

45 function isChineseChar(c) { 

46 var reg = /[\u4E00-\u9FA5]/; // TODO: 定义 正则 表达 式 

47 return reg.test(c) 7 

48 用 

49 </script> 

50 </html> 


关于 【代码 7-7】 的 说 明 : 


@ 第 14 行 代码 通过 <input id="id-input-count-char"> 标 签 元 素 定义 了 一 个 文本 框 ,并 定义 了 onblur 
事件 处 理 方法 (countChar() )， 用 于 测试 “判断 字符 的 个 数 ”的 功能 。 

@ 第 15 行 代码 通过 <input> 标 签 元 素 定义 了 另 一 个 文本 框 (只 读 readonly 类 型 )， 用 于 显示 判断 
字符 个 数 的 结果 。 

@ 第 23~39 行 代码 是 countChar() 方 法 的 实现 过 程 ， 关 键 是 第 32 行 代 码 调用 的 isChineseChar() 
方法 ， 该 方法 用 于 判断 字符 是 否 为 汉字 字符 。 

@ 第 45~48 行 代码 是 isChineseChar() 方 法 的 实现 过 程 。 其中， 第 46 行 代码 定义 的 正则 表达 式 
可 用 于 判断 汉字 字符 ， 第 47 行 代码 通过 调用 test() 方 法 返回 判断 结果 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 7.6 所 示 。 
如 图 7.6 中 箭头 所 示 ， 提 示 信 息 中 显示 了 总 计 字符 个 数 、 汉 字 字 符 个 数 和 非 汉 字 字 符 个 数 。 
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Javascript 文本 框 特效 - 判断 字符 的 个 数 


请 纵 入 : |1a 汉 字 2b 字 符 3c 基 新 | 
输出 : 共计 12 个 字符 ,汉字 字符 为 6 个 , 非 汉字 闻 符 为 6 个 . 


7.6 JavaScript 实现 判断 字符 的 个 数 功能 


7.7 文本 框 获取 焦点 后 自动 清除 内 容 


在 用 户 需 要 重新 输入 文本 框 内 容 的 场景 下 ， 往 往 用 户 要 手动 清除 文本 框 中 的 原始 内 容 ， 操 作 
起 来 不 太 方 便 。 于 是 ， 设 计 人 员 就 想到 了 利用 文本 框 获 取 焦 点 onfocus() 事 件 来 自动 清除 文本 框 中 
的 原始 内 容 。 下 面 就 看 一 个 通过 JavaScript 实现 文本 框 获取 焦点 后 自动 清除 内 容 的 代码 实例 。 


【代码 7-8】( 详 见 源 代码 目录 ch07-jjs-input-focus-clear.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 文 本 框 获 取 焦 点 后 自动 清除 内 容 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-center"> 


14 文本 框 : gnbsp; gnbsp; 

15 <input type="text" 

16 value=" 文 本 框 获 取 焦 点 后 自动 清除 内 容 " 

17 id="id-input-focus-clear" 

18 onfocus="focusClearContent (this.id)"/><br/> 
19 </div> 

20 </body> 

21 <script type="text/javascript"> 

pp 和 


23 * on input get focus, clear it's content 
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24 * @param thisid 

25 二 计 

26 function focusClearContent (thisid) { 

FJ var input = document.getElementById (thisid) 7 

2 input.value = ''; // TODO: 把 文本 内 容 的 值 设 为 空 字符 
29 } 

30 </script> 

31 </html> 


关于 【代码 7-8】 的 说 明 : 

@ 第 15~18 行 代码 通过 <input id="id-input-focus-clear"> 标 签 元 素 定义 了 一 个 文本 框 ， 并 定义 了 
onfocus 事件 处 理 方法 (focusClearContent() )， 用 于 测试 “文本 框 获取 焦点 后 自动 清除 内 容 ” 
的 操作 。 

@ 第 26~29 行 代码 是 focusClearContent() 方 法 的 实现 过 程 ， 关 键 是 第 28 行 代 码 , 通过 将 文本 框 
的 value 属性 值 清空 来 实现 文本 框 在 获取 焦点 后 自动 清除 文本 框 内 容 的 功能 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 7.7 所 示 。 


加 ,evascript 全 人 xx 十 一 口 


© © localhost "i» 


文本 框 获取 焦点 后 自动 清除 内 容 


文本 柑 [ 文 本 框 获取 焦点 后 让 动 清除 内 容 


获取 焦点 后 , 自动 清空 内 容 


图 7.7 JavaScript 实 现 文本 框 获取 焦点 后 自动 清除 内 容 
7.8 清空 所 有 文本 型 输入 杠 


用 户 在 操作 表单 时 ， 有 时 需要 清空 所 有 文本 型 输入 框 的 内 容 ， 这 些 文本 框 不 但 包括 “text” 类 
型 ， 还 包括 “password” 或 “email” 类 型 等 。 此 时 ， 就 需要 设计 人 员 先 根据 <input> 标 签 元 素 的 type 
属性 来 判断 再 有 针对 性 地 进行 操作 。 下 面 看 一 个 通过 JavaScript 实现 清空 所 有 文本 型 输入 框 的 代码 
实例 。 


【代码 7-9】( 详 见 源 代码 目录 ch07-js-input-all-clear.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
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06 </head> 
07 <body> 
08 <!-- 添加 文档 主体 内 容 --> 
09 <header> 
10 <nav> 清 空 所 有 文本 型 输入 框 </nav> 
11 </header> 
12 <!-- 添加 文档 主体 内 容 --> 
13 <div id="id-div-center"> 
14 文本 框 :gnbsp; snbsp;<input type="text" value=" 输 入 框 text 类 型 "/><br/><br/> 
15 文本 框 :gnbsp; gnbsp;<input type="password" value="123456"/><br/><br/> 
16 文本 框 :gnbsp; gnbsp;<input type="email" value="king@email.com"/> 
<br/><br/> 
17 <button onclick="clearAllText () "> 清空 输入 框 (text)</button><br/> 
18 <button onclick="clearAllInput () "> 清空 输入 框 (text 1| Passwordlemail) 
</button><br/> 
19 </div> 
20 </body> 
21 <script type="text/javascript"> 
2 Ve 
23 * clear input, type = text 
24 wd 
ls function clearAllText() { 
26 var inputs = document .getElementsByTagName ("input"); 
oh for (let i=0; i<inputs.length; i++) { 
28 if(inputs[i] .type == "text") { 
29 inputs [i] .value = ""; 
30 } 
31 } 
32 } 
33 Tn 
34 * clear input, type = textlpasswordlemail 
35 法 
36 function clearAllInput() { 
包 Var inputs = document .getElementsByTagName ("input"); 
38 for (let i=0; i<inputs.length; i++) { 
39 if(inputs [i] .上 type == "text"||inputs[il] .type== 
"password"||inputs[i].type == "email") { 
40 inputs[i] .value = ""; 
41 } 
42 } 


43 
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44 </script> 
45 </html> 


关于 【代码 7-9】 的 说 明 : 


@ 第 14~ 16 行 代码 通过 <inpuf> 标 签 元 素 定 义 了 一 组 文本 框 , 且 其 type 属性 值 分 别 为 text 类 型 、 
password 类 型 和 email 类 型 ， 用 于 测试 “清空 所 有 文本 型 输入 框 ”的 操作 。 
@ 第 17 行 代码 通过 <button> 标 签 元 素 定义 了 第 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方法 
(clearAllText( )， 用 于 进行 清除 全 部 text 类 型 文本 框 中 内 容 的 操作 。 
@ 第 18 行 代码 通过 <button> 标 签 元 素 定义 了 第 二 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方法 
(clearAllInput() )， 用 于 进行 清除 全 部 text 类 型 、password 类 型 和 email 类 型 文本 框 中 内 容 的 
操作 。 
@ 第 25~32 行 代码 是 事件 处 理 方法 (clearAllText() ) 的 实现 过 程 ， 关 键 是 第 28 行 代码 ， 先 通 
过 判断 文本 框 的 type 属性 值 是 否 为 text 类 型 再 进行 清空 所 有 文本 型 输入 框 的 操作 。 
@ 第 36~43 行 代码 是 事件 处 理 方法 (clearAllInput() ) 的 实现 过 程 ， 与 clearAllText() 方 法 的 区 别 
就 是 第 39 行 代码 ， 先 通过 判断 文本 框 的 type 属性 值 是 否 为 text 类 型 、password 类 型 和 email 
类 型 中 的 任 一 类 ， 再 进行 清空 所 有 文本 型 输入 框 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 7.8 所 示 。 


图 ,avascript 全 Ex | 十 一 还 


国 ,wvasciptse x 十 - 口 国 ,wesciptsE x 十 - 口 


[I 
nlx 


GC © localhcst 加 为 © © localhost "OO» CG © localhost "BO» 
清空 所 有 文本 型 输入 框 清空 所 有 文本 型 输入 框 清空 所 有 文本 型 输入 框 
eal ] 7 六 全 的 和 MEet 弄 2 半径 | 
Es rr 文 二 全 [eeeeee ] 文本 栓 
文本 框 [ang@emallcom 文本 框 king@email.com ] 文本 栓 
清空 输入 框 (text) 清空 输入 在 (text) 清空 输入 研 (text) 
二 和 和 Eedlpasarorllenal em Nelrossvord lanal) 


图 7.8 JavaScript 实现 清空 所 有 文本 型 输入 框 


如 图 7.8 中 箭头 所 示 ， 中 间 的 页 面 为 原始 状态 ， 左 侧 页 面 为 “清空 文本 框 (text)” 内 容 后 的 效 
果 ， 右 侧 页 面 为 “清空 文本 框 (textlpasswordlemail)” 内 容 后 的 效果 。 


7.9 校 验 电 话 号 码 格式 


在 HTML 页 面 表单 中 ， 校 验 用 户 录 入 的 电话 号 码 格式 是 否 正确 是 一 项 很 常用 的 设计 功能 。 本 
节 主 要 以 国内 常用 的 固定 电话 和 移动 电话 号 码 为 样本 目标 ， 通 过 JavaScript 正则 表达 式 来 测试 完成 
校 验 电话 号 码 格式 的 操作 。 下 面 看 一 个 通过 JavaScript 实现 校 验 电 话 号 码 格式 的 代码 实例 。 
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-input-regex-tel.html 文件 ) 


01 <!doctype html> 

02 <htm1l lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 

06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 文本 框 特效 - 校 验 电话 号 码 格式 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center"> 

14 电话 号 码 :<input type="text" id="id-input-tel" 
onblur="validateTel (this.id)"/> 

15 验证 结果 :<input type="text" id="id-input-result" readonly> 

16 </div> 

17 </body> 

18 <script type="text/javascript"> 

9 function validateTel (thisid) { 

20 var vResult = document .getElementById("id-input-result"); 

电 帮 var vTel = document .getElementById (thisid); 

22 var vTelVal = vTel.value; 

2 var regexTel = /^[(0-9)-]+$/; 

24 Var regexMobile = /^1[3578] \d{9}$/; 

25 var regexTell = /^0\d{2}-\d{8}$I^0\d{3}-\d{7}$/; 

26 Var regexTel2 = /^\(0\d{2}\)\d{8}$1^\(0\d{3}\) \d{7}$/; 

2 if (regexTel.test (vTelVal)) { 

28 if (regexMobile.test(vTelVal)) { 

29 vResult .value = "正确 的 手机 号 码 格 式 ."; 

30 } else if (regexTell.test(vTelVal) || regexTel2.test(vTelVval)){ 

31 vResult .value = "正确 的 固定 电话 号 码 格式 ."; 

32 } else { 

33 vResult .value = "电话 号 码 格式 不 正确 ,请 重新 检查 ."; 

34 } 

35 } else { 

36 vResult .value = "电话 号 码 格式 不 正确 , 请 重新 检查 ."; 

37 } 

38 } 

39° </script> 

40 </html> 
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关于 【代码 7-10】 的 说 明 : 


@ 第 14 行 代码 通过 <input id="id-input-tel"> 标 签 元 素 定义 了 一 个 文本 框 ， 并 定义 了 onblur 事件 
处 理 方法 ( validateTel() )， 用 于 测试 “ 校 验 电 话 号 码 格式 ”的 操作 。 
@ 第 15 行 代码 通过 <input> 标 签 元 素 定义 了 另 一 个 文本 框 (只 读 readonly 类 型 )， 用 于 校 验 电话 
号 码 格式 的 结果 。 
e 第 19~38 行 代码 是 validateTel() 方 法 的 实现 过 程 , 关键 是 第 23 ~ 26 行 代 码 定 义 的 一 组 正则 表 
达 式 ， 分 别 用 来 验证 手机 号 码 和 固定 电话 号 码 。 
> 第 23 行 代码 定义 的 正则 表达 式 (regexTel ) 是 对 用 户 输入 电话 号 码 的 一 个 大 体 测 试 。 因 为 
国内 手机 号 码 只 包括 数字 ( 不 考虑 国际 区 号 ) 国内 固定 电话 的 区 号 和 电话 号 码 之 间 一 般 
通过 短 横 杠 “-” 或 小 括号 “( )” 来 连接 。 因 此 ， 正 则 表达 式 (regexTel ) 只 对 数字 和 短 横 
杠 “-” 或 小 括号 “( ) 来 进行 验证 。 
> 第 24 行 代 码 定义 的 正则 表达 式 (regexMobile ) 是 对 用 户 输入 手机 号 码 的 一 个 较为 精确 的 
测试 。 国 内 手机 号 码 是 国定 的 11 位 数字 ( 不 考虑 国际 区 号 )， 且 目前 的 首位 号 码 固定 为 数 
字 1， 第 二 位 号 码 为 固定 数字 3、5、7 和 8。 
> 第 25~26 行 代码 定义 的 正则 表达 式 (regexTell 和 regexTel2 ) 是 对 用 户 输入 固定 电话 号 码 
的 一 个 较为 精确 的 测试 。 正 则 表达 式 (regexTell ) 针对 的 是 使 用 短 横 杠 “-” 符 号 连接 的 
固定 电话 ， 而 正则 表达 式 ( regexTel2 ) 针对 的 是 使 用 小 括号 “( ) 符号 连接 的 固定 电话 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 针 对 手机 号 码 的 具体 效果 如 图 7.9 所 示 。 


国 Javascipt32 和 x 十 一 口 x 


国 Javascipt 人 全 x | 十 一 0 > 


> GC © localhost 加 个 入 > CI © localhost 加 在 必 


JavaScript 文本 框 特效 - 校 验 电话 号 码 格式 JavaScript 文本 框 特效 - 校 验 电话 号 码 格 式 


电话 号 码 |13800138000 电话 号 码 |1234567890 
验证 结果 正确 的 手机 号 码 格式 . 险 ; 下 结果 : 电话 号 码 格式 不 正确 ,请 重新 检查 . 


图 7.9 ”JavaScript 实现 校 验 电话 号 码 格式 (手机 号 码 ) 
针对 固定 电话 号 码 的 具体 效果 如 图 7.10 所 示 。 


国 ,evescipt 人 xi X | 十 二 园 ,evesciptsfexm x 十 - 0O x 
GC © localhost 加 在 为 三 CG © localhost 收回 人 »》 三 
JavaScript 文本 框 特效 - 校 验 电 话 号 码 格式 JavaScript 文本 框 特效 - 校 验 电话 号 码 格式 
电话 3 码 : |010-66668888 电话 号 码 |(0123)1234567 
is 时 -正确 的 国定 电话 号 码 局 式 . 党 条 正确 的 国 让 电话 号 码 格式 


7.10 JavaScript 实现 校 验 电话 号 码 格式 (固定 电话 号 码 ) 
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7.10 ”鼠标 划 过 文本 框 改 


半 


如 果 想 突出 显示 HTML 表单 中 比较 重要 的 文本 框 ， 那 么 当 用 户 鼠 标 划 过 该 文本 框 时 改变 其 背景 
颜色 是 一 个 不 错 的 选择 。 下 面 看 一 个 通过 JavaScript 实现 鼠标 划 过 文本 框 改变 其 背景 色 的 代码 实例 。 


【代码 7-11】( 详 见 源 代码 目录 ch07-js-input-mouseover-bgcolor.html 文件 ) 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
2 
12 
3 
14 
15 
16 
7 
18 
1 
20 
2 
22 
| 
24 
25 
26 
27 
28 
29 
30 
总 和 
3 这 
33 
34 


<!doctype html> 
<html lang="en"> 
<head> 
<!-- 添加 文档 头 部 内 容 --> 
<title>JavaScript 全 程 实例 </title> 
</head> 


<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav> 鼠 标 划 过 文本 框 改变 其 背景 色 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 


<div id="id-div-center"> 
<!-- 定义 文本 框 --> 
文本 框 : gnbsp; gnbsp;<input type="text"/> 
文本 框 : snbsp; gnbsp;<input type="text"/> 
文本 框 : snbsp; gnbsp; <input type="text"/> 
</div> 
</body> 
<script type="text/javascript"> 
/** 
* window on load event 
* @param ev 
ed 
window.onload = function (ev) { 


var inputs 
// TODO: 遍历 所 有 文本 框 


for (var i = 0; i < inputs.length; i++) 


var input inputs[i]; 


input.onmouseover = function () { 


this.style.backgroundColor 
] 7 
input .onmouseout 


function () { 
this.style.backgroundColor 


document .getElementsByTagName ('input'); 


// TODO: 当前 文本 框 


'red'; // TODO: 修改 背景 色 为 红色 


// TODO: 恢复 背景 色 
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35 ] 7 
36 } 

37 }; 

38 </script> 

39 </html> 


关于 【代码 7-11】 的 说 明 : 

@ 第 15~17 行 代码 通过 <inputtype="text"> 标 签 元 素 定义 了 一 组 文本 框 ， 用 于 实现 “和 鼠标 划 过 文 
本 框 改 变 其 背景 色 ” 的 功能 。 

@ 第 28~36 行 代码 通过 for 循环 语句 遍历 全 部 文本 框 ， 并 依次 为 每 一 个 文本 框 添加 和 鼠标 经 过 
onmouseover 事件 处 理 方法 和 鼠标 移出 onmouseout 事件 处 理 方法 ， 在 事件 处 理 方法 中 相应 地 
为 文本 框 添 加 和 取消 背景 颜色 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 7.11 所 示 。 


国 Javascipt x 十 一 0 x 国 Javascipt x | 十 一 口 x 国 Javascipt x | 十 一 口 X 
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鼠标 划 过 文本 框 改 变 其 背景 色 和 鼠标 划 过 文本 框 改变 其 背景 色 鼠标 划 过 文本 框 改 变 其 背景 色 
x+E EN 文本 本 广 # 杠 
3 Eee 
文 相框 文本 本 、、 文本 本 | 
es=s===3 
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图 7.11 JavaScript 实现 鼠标 划 过 文本 框 改变 其 背景 色 
如 图 7.11 中 箭头 所 示 , 页 面 中 分 别 演示 了 鼠标 依次 划 过 每 个 文本 框 后 改变 其 背景 颜色 的 效果 。 


7.11 设置 下 拉 列 表 框 的 值 


在 HTML 页 面 中 ， 用 户 可 以 通过 下 拉 列 表 框 手动 选取 自己 需要 的 选项 值 。 不 通过 手动 选择 ， 
能 不 能 通过 程序 设置 下 拉 列 表 框 的 值 呢 ? 答案 是 完全 可 以 的 , 而 且 通过 JavaScript 脚本 语言 设置 下 拉 列 
表 框 的 值 是 一 项 非常 有 用 的 功能 。 下 面 看 一 个 通过 JavaScript 实现 设置 下 拉 列 表 框 的 值 的 代码 实例 。 


【代码 7-12】( 详 见 源 代码 目录 ch07-js-select-set-value.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
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06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 设 置 下 拉 菜 单 的 值 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center"> 


14 <!-- 定义 下 拉 列 表 框 --> 


5 设置 颜色 : gnbsp; gnbsp; 

16 <select name="selSetColor" id="idSelSetColor"> 
1 <option> 请 选择 . . .</option> 

18 <option value="red">Red</option> 

19 <option value="yellow">Yellow</option> 

20 <option value="green">Green</option> 

21 </select> 


2 <!-- 定义 Radio 单 选 --> 
23 请 选择 颜色 : snbsp; snbsp; 


24 <input name="radioColor" value="red" 
onclick="setSelValue (this.value);" checked/>Red 

<input name="radioColor" value="yellow" 
onclick="setSelValue (this.value);"/>Yellow 

26 <input name="radioColor" value="green" 
onclick="setSelValue (this.value);"/>Green 

27 </div> 

28 </body> 

29 <script type="text/javascript"> 

30 window.onload = function (ev) { 

久 电 Var idSel = document .getElementById('idSelSetColor'); 

32 Var arrRadio = document .getElementsByName ("radioColor"); 

a for (let i = 0; i < arrRadio.length; i++) { 

34 if (arrRadio[i].checked) { 

35 idSel.value = arrRadio[i] .value; 

36 1 

37 ' 

38 Fr 

3239 WR 

40 * set select value 

41 * @param val 

42 天 

43 function setSelValue (val) { 

44 var idSel = document.getElementById('idSelSetColor') 


45 idSel.value = val; 
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46 l 
47 </script> 
48 </html> 


关于 【代码 7-12】 的 说 明 : 


@ 第 16~21 行 代码 通过 <select id=-"idSelSetColor'> 标 签 元 素 定义 了 一 个 下 拉 列 表 框 ， 并 定义 了 
一 组 颜色 选项 ， 用 于 实现 “设置 下 拉 列 表 框 的 值 ”的 操作 。 

@ 第 24~26 行 代码 通过 <input type="radio"> 标 签 元 素 定 义 了 一 组 单 选 框 ， 并 分 别 定义 了 单 击 
onclick 事件 处 理 方法 (setSelValue() )， 用 于 设置 上 面 定义 的 下 拉 列 表 框 的 颜色 值 。 其 中 ， 第 
24 行 代码 定义 的 单 选 框 (Red ) 通过 添加 “checked” 属性 ， 被 定义 为 默认 选中 项 。 

@ 第 30~38 行 代码 定义 了 页 面 加 载 onload 事件 处 理 方法 ， 首 先 判断 哪 一 项 单 选 框 是 被 选中 

(checked 属性 值 为 true ) 的 , 然后 将 该 单 选 框 的 颜色 值 设置 为 下 拉 列 表 框 的 初始 化 颜色 值 选 项 。 

@ 第 43~46 行 代码 是 setSelValue() 事 件 处 理 方法 的 实现 过 程 ， 通 过 将 传递 进来 的 单 选 框 颜色 值 

赋 给 下 拉 列 表 框 ， 实 现 通 过 JavaScript 脚本 语言 “设置 下 拉 列 表 框 的 值 ”的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 7.12 所 示 。 


如 图 7.12 中 箭头 所 示 ， 当 用 户 通过 单 选 框 选 择 颜 色 后 ， 下 拉 列 表 框 的 颜色 选项 也 被 同步 设置 
为 对 应 的 颜色 了 。 


国 ,ossop x 十 - 口 x 国 ,rssop x 十 -= 口 x 国 ,eescoip x 十 - 口 x 
》 G | @ localhost 二 为 |] 三 GO localhost Dp 三 CG © localhost | 三 
设置 下 拉 荣 单 的 值 设置 下 拉 菜 单 的 值 设置 下 拉 荣 单 的 值 
设置 奖 色 [Red ~ 设置 基色 | Yellow ~ 设置 颜色 [Green ”~ 
请 迁 近 颜色 ed 口 Yelow OGreen 请 远 振 矣 色 ， 〇 Red 多 Yellow 〇 Green 请 迁 择 颜色 〇 Red O 〇 Yellow 图 Green 


图 7.12 JavaScript 实现 设置 下 拉 列表 框 的 值 
7.12 ”动态 添加 下 拉 列 表 框 选项 


7.11 节 中 介绍 了 设置 下 拉 列 表 框 的 值 ， 本 节 继 续 介 绍 如 何 动态 添加 下 拉 列 表 框 的 选项 。 在 
HTML DOM 对 象 中 ， 下 拉 列 表 框 Select 对 象 中 定义 有 一 个 options 集合 ， 代 表 着 下 拉 列 表 框 中 全 
部 选项 的 集合 。 通 过 调用 options 集合 的 add(option[,]) 方 法 ， 就 可 以 为 Select 对 象 添加 一 个 选项 。 
下 面 看 一 个 通过 JavaScript 实现 动态 添加 下 拉 列 表 框 选项 的 代码 实例 。 


【代码 7-13】( 详 见 源 代码 目录 ch07-js-select-add-option.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 
03 <head> 
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04 <!-- 添加 文档 头 部 内 容 --> 
05 <title>JavaScript 全 程 实例 </title> 
06 </head> 
07 <body> 
08 <!-- 添加 文档 主体 内 容 --> 
09 <header> 
10 <nav> 动 态 添加 下 拉 列 表 框 选项 </nav> 
11 </header> 
12 <!-- 添加 文档 主体 内 容 --> 
13 <div id="id-div-center"> 
14 <table> 
你 tr> 
16 <th> 设 置 颜色 : gnbsp; gnbsp; </th> 
47 <td> 
18 <!-- 定义 下 拉 列 表 框 --> 
19 <select name="selSetColor" id="idSelSetColor"> 
20 <option> 请 选择 . . .</option> 
2 <option value="red">Red</option> 
22 <option value="yellow">Yellow</option> 
PP <option value="green">Green</option> 
24 </select>gnbsp; gnbsp; 
25 </td> 
26 <th> 添 加 颜色 : snbsp; &nbsp;</th> 
2 <td><input type="button" id="id-add-color" value=" 添 加 颜色 " 
onclick="addColor () "/></td> 
28 </Er> 
29 <tr> 
30 <td></td> 
31 <td></td> 
2 <td>value: gnbsp; gnbsp;</td> 
33 <td><input type="text" id="id-sel-val" value=""/></td> 
34 </tr> 
35 <tr> 
36 <td></td> 
3 <td></td> 
38 <td>text: gnbsp; gnbsp;</td> 
39 <td><input type="text" id="id-sel-text" value=""/></td> 
40 </tr> 
41 </table> 
42 </div> 
43 </body> 
44 <script type="text/javascript"> 
45 hi 
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46 * add option color 

47 * @param thisid 

48 EE 

49 function addCcolor (thisid) { 

50 var idSel = document.getElementById('idSelSetColor')7 
本 再 var idSelVal = document.getElementById('id-sel-val')7 
与 2 Var idSelText = document .getElementById('id-sel-text'); 
53 var val = idSelVal.value; 

54 Var text = idSelText.value; 

5 idSel.options.add (new Option(val, text)); 

56 } 

57 </script> 

58 </html> 


关于 【代码 7-13】 的 说 明 : 

@ 第 19~24 行 代码 通过 <select id="idSelSetColor"> 标 签 元 素 定义 了 一 个 下 拉 列 表 框 ， 并 初始 化 
了 一 组 颜色 选项 ， 用 于 测试 “动态 添加 下 拉 列 表 框 选项 ”的 操作 。 

@ 第 27 行 代码 通过 <input type="button"> 标 签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 
方法 (addColor() )， 用 于 将 用 户 输入 的 选项 值 ( 见 第 33 行 和 第 39 行 代码 的 解释 ) 添加 进 下 
拉 列 表 框 。 

@ 第 33 行 和 第 39 行 代码 分 别 通过 <input type="text"> 标 签 元 素 定义 了 一 组 文本 框 ， 用 于 用 户 输 
入 下 拉 列 表 框 选项 <option> 的 value 属性 值 和 text 文 本 内 容 。 

@ 第 49~56 行 代码 是 addColor() 事 件 处 理 方法 的 实现 过 程 ， 首 先 获取 用 户 输入 的 选项 <option> 
值 ， 然 后 在 第 55 行 代码 通过 options 集合 的 add() 方 法 将 Option 对 象 添加 进 下 拉 列 表 框 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 7.13 所 示 。 


国 ,evascript 人 sm Xx 十 - 口 x 国 ,avascript 全 ERg x 茧 = 
CG © localhost 回合» 三 © © localhost 回合» 三 
动态 添加 下 拉 列 表 框 选项 动态 添加 下 拉 列 表 框 选项 


7.13 ”JavaScript 实现 动态 添加 下 拉 列 表 框 选项 
如 图 7.13 中 箭头 所 示 ， 通 过 “添加 颜色 ”按钮 成 功 将 颜色 (blue) 添加 进 下 拉 列 表 框 中 。 
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7.13 ”动态 删除 下 拉 列 表 框 选项 


本 节 接 着 前 文 的 内 容 ， 继 续 介 绍 如 何 动态 删除 下 拉 列 表 框 的 选项 。 在 HTML DOM 对 象 中 ， 
通过 调用 下 拉 列 表 框 options 集合 的 remove(selectedIndex) 方 法 ,就 可 以 为 Select 对 象 删除 一 个 选项 。 
通过 将 options 集合 的 长 度 (length) 属性 设置 为 零 ， 就 可 以 将 Select 对 象 的 全 部 选项 进行 删除 。 下 
面 看 一 个 通过 JavaScript 实现 动态 删除 下 拉 列 表 框 选项 的 代码 实例 。 


【代码 7-14】( 详 见 源 代码 目录 ch07-js-selectremove-option.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 动 态 删除 下 拉 列 表 框 选项 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-center"> 


14 <table> 

15 <tr> 

16 <th> 设 置 颜色 : snbsp; snbsp;</th> 

Eh <td> 

18 <!-- 定义 下 拉 列 表 框 --> 

I <select name="selSetColor" id="idSelSetColor"> 

20 <option> 请 选择 . . .</option> 

2 <option value="red">Red</option> 

力 硫 <option value="yellow">Yellow</option> 

和 23 <option value="green">Green</option> 

24 </select>gnbsp; gnbsp; 

2 </td> 

26 EYE 

27 <tr> 

28 <td> 删 除 选项 : snbsp; snbsp;</td> 

29 <input type="button" id="id-remove-color" value=" 删 除 颜色 " 
onclick="removeColor () "/> 

30 </tr> 


31 < 
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32 <td> 全 部 删除 : snbsp; snbsp;</td> 

33 <input type="button" id="id-remove-all-color"” value=" 全 部 删除 " 
onclick="removeAllColors()"/> 

34 </tr> 

3 </table> 

36 </div> 

37 </body> 

38 <script type="text/javascript"> 

39 Db 

40 * remove option color 

41 * @param thisid 

42 计 

43 function removeColor(thisid) { 

44 var idSel = document .getElementById('idSelSetColor'); 

45 idSel.options .remove (idSel.selectedIindex); 

46 } 

47 pe 

48 * remove option colors 

49 * @param thisid 

50 人 

所 于 function removeAllColors(thisid) { 

52 var idSel = document .getElementById('idSelSetColor'); 

53 idSel.options.length = 0; 

54 } 

55 </script> 

56 </html> 


关于 【代码 7-14】 的 说 明 : 

@ 第 19~24 行 代码 通过 <select id=-"idSelSetColor"> 标 签 元 素 定义 了 一 个 下 拉 列 表 框 ， 并 初始 化 
了 一 组 颜色 选项 ， 用 于 实现 “动态 删除 下 拉 列 表 框 选 项 ”的 操作 。 

@ 第 43~46 行 代码 定义 的 事件 处 理 方法 用 于 动态 删除 下 拉 列 表 框 中 的 选项 。 其 中 ， 在 第 45 行 
代码 中 ， 先 通过 selectedIndex 属性 获取 当前 选中 的 下 拉 列 表 框 选项 ， 再 通过 remove() 方 法 删 
除 该 选中 项 。 

@ 第 51~54 行 代码 定义 的 事件 处 理 方法 用 于 动态 删除 下 拉 列 表 框 中 的 全 部 选项 。 其 中 ， 在 第 
53 行 代 码 中 ， 通 过 将 options 集合 的 length 属性 设置 为 0 实现 了 删除 全 部 选项 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 7.14 所 示 。 
如 图 7.14 中 箭头 和 标注 所 示 ， 我 们 分 别 测试 了 删除 颜色 〈Yellow) 选项 和 删除 全 部 颜色 选项 
的 操作 。 
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园 ,evascipt 全 Ex X | 十 一 口 x 


> G Olocalhost 回合 » 三 GCG Olocalhot 回合 »》 三 
动态 删除 下 拉 列 表 框 选项 动态 删除 下 拉 列 表 框 选项 
全 部 删除 后 的 效果 
设置 同色 : [ ~ 添加 颇 色 : | 添加 富 色 


动态 删除 下 拉 列 表 框 草本 


选中 颜色 (Yellow) 


全 部 删除 : | Green text 六 
删除 颜色 (Yellow) 后 的 效果 


7.14 ”JavaScript 实现 动态 删除 下 拉 列 表 框 选 项 


7.14 二 级 联动 下 拉 列 表 框 


在 HTML 网 页 设计 中 ， 二 级 联动 下 拉 列 表 框 是 一 种 比较 常用 的 控件 。 所 谓 二 级 联动 下 拉 列 表 
框 , 就 是 指 两 个 存在 从 属 关系 的 下 拉 列 表 框 。 从 属 关 系 也 可 以 称 为 上 下 级 关系 。 在 选择 上 一 级 下 拉 
列表 框 的 选项 时 , 下 一 级 下 拉 列 表 框 的 选项 会 随 之 进行 切换 。 下 面 介绍 一 个 通过 JavaScript 实现 “大 
洲 -国家 ”二 级 联动 下 拉 列 表 框 的 代码 实例 。 


【代码 7-15】( 详 见 源 代码 目录 ch07-js-select-2-level.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 
09 <header> 


10 <nav> 二 级 联动 下 拉 列 表 框 </nav> 


第 7 章 文本 框 和 下 拉 列 表 框 特效 | 141 
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29 
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47 
48 
49 
50 


</header> 
<!-- 添加 文档 主体 内 容 --> 


<div id="id-div-center"> 


<form name="form2sel"> 
大 洲 : 
<select name="continent" onchange="sel country()"> 
<option value="0"> 选 择 大 洲 . . .</option> 
<option value=" 亚 洲 "> 亚洲 </option> 
<option value=" 欧 洲 "> 欧洲 </option> 
<option value=" 美 洲 "> 美洲 </option> 
</select> 
国家 : 
<select name="country"> 
<option value="0"> 选 择 国 家 . . .</option> 
</select> 
</form> 
</div> 
</body> 
<script type="text/javascript"> 


Var country = [ 


Wz 


1" 中 国 "，" 日 本 "，" 韩 国 "]， 
[" 英 国 "，" 德 国 %， "法国 "1 ， 
[" 美 国 "%， "巴西 "， "阿根廷"] 


function sel_country() { 


// TODO: 获得 大 洲 下拉 选 择 框 对象 

var selContinent = document.form2sel.continent; 

// TODO: 获得 国家 下 拉 选 择 框 对 象 

Var selCountry = document.form2sel .country; 

// TODO: 获得 大 洲 所 对 应 的 国家 数组 

Var arrContinentCountry = country[selContinent.selectedIndex - 1]; 

// TODO: 清空 国家 下 拉 列 表 框 , 仅 保 留 第 一 个 选项 

selCountry.length = 1; 

// TODO: 将 国家 数组 中 的 值 填充 到 国家 下 拉 列 表 框 中 

for (var i = 0; i < arrContinentCountry.length; i++) { 

selCountry[i + 1] = new OPtion (arrContinentCountry[i] 

arrContinentCountry[i]); 


</script> 
</html> 
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关于 【代码 7-15】 的 说 明 : 
@ 第 16~21 行 代码 通过 <selectname="continent"> 标 签 元 素 定 义 了 第 一 级 “大 洲 ” 下 拉 列 表 框 ， 


初始 化 了 一 组 “大 洲 ” 的 选项 ， 并 声明 了 onchange 事件 处 理 方法 (sel_country() )， 用 于 实现 
“二 级 联动 下 拉 列 表 框 ”中 的 第 一 级 下 拉 列 表 框 。 

第 23~25 行 代码 通过 <select name="country"> 标 签 元 素 定义 了 第 二 级 “国家 ”下 拉 列 表 框 ， 

仅仅 初始 化 了 一 个 “选择 国家 ”选项 ， 用 于 实现 “二 级 联动 下 拉 列 表 框 ”中 的 第 二 级 下 拉 列 

表 框 。 

第 30~34 行 代码 声明 并 初始 化 了 一 个 二 维 数组 ( country )， 定 义 了 “大 洲 ” 下 所 对 应 的 “ 国 

家 ”数组 。 

第 35~ 48 行 代码 是 事件 处 理 方法 ( sel_country() ) 的 实现 过 程 。 首 先 ， 第 41 行 代 码 根据 第 一 

级 “大 洲 ” 下 拉 列 表 框 (<select name="continent"> ) 的 selectedIndex 属性 值 ， 获 取 了 “大 洲 ” 

所 对 应 的 “国家 ”数组 ; 然后 ， 第 45~47 行 通过 for 循环 语句 将 获取 的 “国家 ”数组 填充 进 

第 二 级 “国家 ”下 拉 列 表 框 ( <select name="country"> )， 从 而 实现 了 “大 洲 -国家 ”二 级 联动 

下 拉 列 表 框 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 7.15 所 示 。 


园 Javascipt x | 十 一 国 Javascipt x | 十 一 


GC © localhost oo CG © localhost 


二 级 联动 下 拉 列 表 框 二 级 联动 下 拉 列 表 框 


洲 [选择 大 洲 ，v 加 家 [选择 家 .| 洲 [ 王 加 | 


图 ,avascrp: x | 十 一 国 Javascipt x | 十 一 


CQ © localhost oo CG © localhost 


二 级 联动 下 拉 列 表 框 二 级 联动 下 拉 列 表 框 


国家 [选择 国家 ... |~| 
| 


7.15 JavaScript 实现 二 级 联动 下 拉 列 表 框 
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7.15 三 级 联动 下 拉 列 表 框 


在 本 节 中 ,我 们 将 在 二 级 联动 下 拉 列 表 框 的 基础 上 进一步 介绍 如 何 实现 三 级 联动 下 拉 列 表 框 。 
下 面 看 一 个 通过 JavaScript 实现 三 级 联动 下 拉 列 表 框 的 代码 实例 。 


【代码 7-16】( 详 见 源 代码 目录 ch07-js-select-3-level.html 文件 ) 


01 <!doctype html> 
02 <htm1l lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 三 级 联动 下 拉 列 表 框 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-center"> 


14 <form name="form3sel"> 

15 大 洲 : 

16 <select name="continent" onchange="sel country()"> 
17 <option value="0"> 选 择 大 洲 . . .</option> 

18 <option value=" 亚 洲 "> 亚洲 </option> 

19 <option value=" 欧 洲 "> 欧洲 </option> 

20 <option value=" 美 洲 "> 美洲 </option> 

2 </select> 

2 国家 : 

| <select name="country" onchange="sel city()"> 
24 <option value="0"> 选 择 国家 . . .</option> 

25 </select> 

26 城市 : 

2 <select name="city"> 

28 <option value="0"> 选 择 城市 . . .</option> 

29 </select> 

9 </form> 

31 </div> 


32 </body> 
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33 <script type="text/javascript"> 


34 


var country = [ 
[" 中 国 "， "日 本 "， "韩国 "1 ， 
[" 英 国 "， "德国 "， "法 国 "]， 
[" 美 国 "， "巴西 "， "阿根廷 "] 
EE 
var city = [ 
DD" 北 京 "， "下海 启 州 "I 四 未 京 "， "大 服 " "名 十 必 w]lz [首尔 ny {J 
"济州 "]]， 
[[" 伦 敦 "，" 曼 彻 斯 特 "， "利物浦 "] ，[" 柏 林 "，" 慕 尼 黑 "，" 法 兰 克 福 "] ， [" 巴 黎 "， 
"里 尔 "， "摩纳哥 "]] ， 
[[" 华 盛 顿 "， "纽约 "， "洛杉矶 "] ， [" 里 约 热 内 卢 "， "圣保罗 "， "巴西 利 亚 "] ， 
[" 布 宜 诺 斯 艾 利 斯 "，" 萨 尔 多 瓦 "， " 罗 萨 里 奥 "] ] 
于 
function sel country() { 
// TODO: 获得 大 洲 下 拉 选 择 框 对 象 
var selContinent = document.form3sel.continent; 
// TODO: 获得 国家 下 拉 选 择 框 对象 
Var selCountry = document.form3sel .country; 
// TODO: 获得 城市 下 拉 选 择 框 对 象 
Var selCity = document.form3sel.city; 
// TODO: 获得 大 洲 所 对 应 的 国家 数组 
Var arrContinentCountry = country[selContinent.selectedIndex - 1]; 
// TODO: 清空 国家 下 拉 列 表 框 , 仅 保 留 第 一 个 选项 
selCountry.length = 1; 
// TODO: 清空 城市 下 拉 列 表 框 , 仅 保 留 第 一 个 选项 
selCity.length = 1; 
// TODO: 将 国家 数组 中 的 值 填充 到 国家 下 拉 列 表 框 中 
for (var i = 0; i < arrContinentCountry.length; i++) { 
selCountry[i + 1] = new Option(arrContinentCountry[i], 
arrContinentCountry[i]); 


} 
function sel city() { 
// TODO: 获得 大 洲 下 拉 选 择 框 对 象 
var SelContinent = document.form3sel.continent; 
// TODO: 获得 国家 下 拉 选 择 框 对象 
Var selCountry = document.form3sel .country; 
// TODO: 获得 城市 下 拉 选 择 框 对 象 
Var selCity = document.form3sel .city; 


// TODO: 获得 大 洲 所 对 应 的 国家 数组 
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了 9 


78 </script> 
79 </html> 


Var arrCountryCity = city[selContinent.selectedIndex-11] 
[selCountry.selectedIndex-1]; 

// TODO: 清空 国家 下 拉 列 表 框 , 仅 保留 第 一 个 选项 

selCity.length = 17 

// TODO: 将 国家 数组 中 的 值 填充 到 国家 下 拉 列 表 框 中 

for (var i = 0; i < arrCountryCity.length; i++) { 
selCity[i + 1] = new Option(arrCountryCity[il], 
arrCountryCity[il)7 

} 


关于 【代码 7-16】 的 说 明 : 
@ 第 16~21 行 代码 通过 <select name="continent"> 标 签 元 素 定义 了 第 一 级 “大 洲 ” 下 拉 列 表 框 ， 


初始 化 了 一 组 “大 洲 ” 的 选项 ， 并 声明 了 onchange 事件 处 理 方法 (sel_country0 )， 用 于 实现 
“三 级 联动 下 拉 列 表 框 ”中 的 第 一 级 下 拉 列 表 框 。 
第 23 ~ 25 行 代码 通过 <select name="country"> 标 签 元 素 定义 了 第 二 级 “国家 ”下 拉 列 表 框 ， 
仅仅 初始 化 了 一 个 “选择 国家 ”选项 ， 并 声明 了 onchange 事件 处 理 方法 (sel_city() )， 用 于 
实现 “三 级 联动 下 拉 列 表 框 ”中 的 第 二 级 下 拉 列 表 框 。 
第 27~ 29 行 代码 通过 <select name="city"> 标 签 元 素 定 义 了 第 三 级 “城市 ”下 拉 列 表 框 ， 仅 仅 
初始 化 了 一 个 “选择 城市 ”选项 ， 用 于 实现 “三 级 联动 下 拉 列 表 框 ”中 的 第 三 级 下 拉 列 表 框 。 
第 34~ 38 行 代码 声明 并 初始 化 了 一 个 二 维 数组 (country ), 定义 “大 洲 ” 下 所 对 应 的 “国家 ” 
数组 。 
第 39~43 行 代 码 声明 并 初始 化 了 一 个 三 维 数组 (city )， 定 义 “ 国 家 ”下 所 对 应 的 “城市 ”数组 。 
第 44~ 61 行 代码 是 事件 处 理 方法 (sel_ country0) ) 的 实现 过 程 。 首 先 ， 第 52 行 代码 根据 第 一 
级 “大 洲 ” 下 拉 列 表 框 (<select name="continent"> ) 的 selectedIndex 属性 值 获取 了 “大洲 ?” 
所 对 应 “国家 ”的 数组 ; 然后， 第 58~60 行 通 过 for 循环 语句 将 获取 的 “国家 ”数组 填充 进 
第 二 级 “国家 ”下 拉 列 表 框 ( <select name="country"> )， 从 而 实现 了 三 级 联动 下 拉 列 表 框 中 
的 “大 洲 -国家 ”二 级 联动 功能 。 
第 62~ 77 行 代码 是 事件 处 理 方法 (sel_city0) ) 的 实现 过 程 。 首 先 ， 第 70 行 代码 根据 第 一 级 
“大 洲 ” 下 拉 列 表 框 (<select name="continent"> ) 的 selectedIndex 属性 值 以 及 第 二 级 “国家 ” 
下 拉 列 表 框 ( <select name="country"> ) 的 selectedIndex 属性 值 ， 获 取 了 “大 洲 ” 所 对 应 “ 国 
家 ”以 及 “国家 ”所 对 应 “城市 ”的 数组 ; 然后 , 第 74 ~ 76 行 通过 for 循环 语句 将 获取 的 “ 城 
市 ”数组 填充 进 第 三 级 “城市 ”下 拉 列 表 框 (<select name="city"> )， 从 而 实现 了 三 级 联动 下 
拉 列 表 框 中 的 “国家 -城市 ”二 级 联动 功能 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 分 别 如 图 7.16、 图 7.17 和 图 7.18 
所 示 。 
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贺 Javascript 全 得 实例 x | 十 


< > ££ GO localhost63342/js-tota 


三 级 联动 下 拉 列 表 框 


园 JavaScript 全 程 实例 x | 证 


££ CQ | © Iocalhost63342/js-tota 


三 级 联动 下 拉 列 表 框 


贺 Javascript 全 程 实例 x | 十 


££ CQ © localhost63342/js-total 


三 级 联动 下 拉 列 表 框 


城市 [选择 城市.…. [~ | 


:过 于 


图 7.18 JavaScript 实现 三 级 联动 下 拉 列 表 框 (三 
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7.16 可 输入 的 下 拉 列 表 框 


在 HTML DOM 规范 标准 中 ， 下 拉 列 表 框 <select> 控 件 是 仅 可 以 选择 ， 但 是 不 可 以 输入 的 。 于 
是 ， 如 何 通 过 扩展 标准 下 拉 列 表 框 <select> 的 功能 ， 让 其 既 可 以 支持 用 户 下 拉 选 择 ， 也 可 以 支持 用 
户 人 工 输入 ， 就 成 为 设计 人 员 展 现 智慧 的 舞台 了 。 

虽然 目前 业内 已 经 开发 出 了 多 款 JavaScript 框架 或 插件 来 实现 这 种 可 输入 的 下 拉 列 表 框 了 , 但 
是 这 里 还 是 想 介 绍 一 种 通过 最 基础 的 JavaScript + CSS 代码 方式 来 实现 的 可 输入 的 下 拉 列 表 框 。 这 
种 方式 的 设计 思路 很 简单 ， 先 通过 将 一 个 文本 框 覆盖 在 一 个 下 拉 列 表 框 上 ,再 将 用 户 选 择 的 下 拉 列 
表 框 选项 填充 到 文本 框 中 即 可 。 

下 面 介绍 一 个 通过 JavaScript 实现 可 输入 的 下 拉 列 表 框 的 代码 实例 。 


【代码 7-17】( 详 见 源 代码 目录 ch07-js-input-select.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <style type="text/css"> 

08 div#id-div-center { 

09 position: relative; 

10 width: 320px; 

3 height: auto7 

2 border: Opx solid black; 
3 margin: 32px auto; 

14 Padding: 2px; 

Es } 

16 div#id-div-center span { 
17 overflow: hidden; 

18 margin-left: 100px; 

9 width: 18px; 

20 } 

23 div#id-div-center select { 
22 width: 128px; 

23 margin-left: -100px; 
24 } 

之 div#id-div-center input { 
26 position: absolute; 


| width: 105px; 
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28 height: 14px; 
29 left: 98px; 
30 
31 </style> 
32 <body> 


33 <!-- 添加 文档 主体 内 容 --> 

34 <header> 

35 <nav> 可 输入 的 下 拉 列 表 框 </nav> 
36 </header> 


37 <!-- 添加 文档 主体 内 容 --> 


38 <div id="id-div-center" style=""> 


39 <span style=""> 

40 <select id="id-sel" onchange="sel input (this.id) "> 
41 <option value="html">HTML</option> 

42 <option value="js">JavaScript</option> 

43 <option value="css">CSS</option> 

44 </select> 

45 </span> 

46 <input id="id-input" style=""> 

47 </div> 

48 </body> 

49 <script type="text/javascript"> 

50 function sel_input (thisid) { 

RH var sel = document.getElementById (thisid) 7 

52 Var input = document .getElementById("id-input"); 
5 input.value = sel.options [sel.selectedIndex] .text; 
54 } 

55 </script> 

56 </html> 


关于 【代码 7-17】 的 说 明 : 
@ 第 38~47 行 代码 通过 <div> 标 签 元 素 定 义 了 一 个 顶层 容器 (CSS 样式 定义 见 第 08~15 行 代 
码 )， 用 于 包含 下 拉 列 表 框 和 文本 框 。 
> 第 39~45 行 代码 通过 <span> 标 签 元 素 定义 了 一 个 二 级 容器 (CSS 样式 定义 见 第 16 ~20 
行 代码 )， 用 于 包含 下 拉 列 表 框 。 其 中 ， 第 40 ~ 44 行 代码 通过 <select id="id-sel"> 标 签 元 素 
定义 了 “可 输入 的 下 拉 列 表 框 ”中 的 下 拉 列 表 框 部 分 ， 并 添加 了 onchange 事件 处 理 方法 
(sel_input() )。 
> 第 46 行 代码 通过 <input> 标 答 元 素 定义 了 一 个 文本 框 ， 用 于 实现 “可 输入 的 下 拉 列 表 框 ” 
中 的 可 输入 部 分 。 
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@ 第 50~ 54 行 代码 是 事件 处 理 方法 (sel input() ) 的 实现 过 程 。 首先， 在 第 53 行 代码 中 ， 先 获 
取 用 户 选择 的 下 拉 列 表 框 选项 ,再 将 选项 文本 填充 进 文 本 框 ,实现 了 “可 输入 的 下 拉 列 表 框 ” 
中 的 用 户 选择 功能 。 其 次 ， 第 46 行 代码 定义 的 文本 框 自身 就 具有 输入 功能 。 这 两 项 功能 结合 
在 一 起 ， 就 实现 了 “可 输入 的 下 拉 列 表 框 ”功能 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 分 别 如 图 7.19 和 图 7.20 所 示 。 


如 图 7.20 中 箭头 所 示 , 这 里 演示 了 可 输入 的 下 拉 列 表 框 中 的 用 户 输入 (人 工 输入 的 文本 为 “可 
输入 ”) 功能 。 


JavascriptsX | 十 - 口 Xx EM 国 JevaScript 
GC © localhost “| 三 
可 输入 的 下 拉 列 表 框 可 输入 的 下 拉 列 表 框 
| «E> 下 
HTML rr 
Er 
Es cs 
人 720 Javascript 实现 可 输入 的 下 拉 列 表 杠 


(选择 功能 ) (输入 功能 ) 


第 8 章 日 期 和 时 间 特 效 


本 章 介 绍 如 何 通过 JavaScript 来 实现 日 期 和 时 间 的 各 种 特效 ， 通 过 这 些 特效 来 丰富 HTML 页 
面 的 设计 手段 和 展示 效果 。 


8.1 日 期 和 时 间 概 述 


日 期 和 时 间 是 HTML 页 面 中 不 太 显眼 ， 但 是 会 经 常 使 用 到 的 元 素 。 其 实 ， 日 期 和 时 间 在 
JavaScript 脚本 语言 开发 中 是 属于 同一 个 概念 的 。 在 JavaScript 对 象 中 ， 专 门 为 日 期 和 时 间 定 义 了 
一 个 Date 对 象 ， 该 对 象 用 来 处 理 日 期 和 时 间 的 编程 。 

关于 Date 对 象 的 语法 格式 如 下 : 


/xx Date 对 象 定义 */ 


Var myDate=new Date() 7 


另外 ， 默 认 情况 下 Date 对 象 会 自动 把 当前 日 期 和 时 间 定 义 为 初始 化 值 。 

通过 JavaScript Date 对 象 可 以 为 日 期 和 时 间 实 现 多 种 页 面 特效 ， 比 如 标题 栏 日 期 、 根 据 时 间 段 
动态 显示 标题 、 倒 计时 效果 、 时 钟 特 效 、 日 历 特 效 、 定 时 器 应 用 ， 等 等 。 本 章 将 为 读者 介绍 多 种 日 
期 和 时 间 特 效 的 代码 实例 。 


8.2 ”在 标题 栏 显示 当前 日 期 


HTML 页 面 的 标题 栏 一 般 用 来 显示 文档 标题 ， 不 过 也 有 设计 人 员 会 将 日 期 和 时 间 显 示 在 标题 
栏 中 。 其 实 ， 在 标题 栏 显示 当前 日 期 的 操作 非常 简单 ， 只 需要 将 日 期 和 时 间 重 新 设 定 给 Document 
对 象 的 标题 “title” 属 性 就 可 以 了 。 下 面 介绍 一 个 通过 JavaScript 实现 在 标题 栏 显示 当前 日 期 的 代 
码 实例 。 


【代码 8-2】( 详 见 源 代码 目录 ch08-js-date-title.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 
03 <head> 
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04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 在 标题 栏 显示 当前 日 期 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 </body> 

14 <script type="text/javascript"> 


15 window.onload = function () { 

16 var date = new Date(); 

17 document .title = date.toString() 7? 
18 } 

19 </script> 

20 </html> 


关于 【代码 8-2】 的 说 明 : 


@ 第 16 行 代码 通过 Date 对 象 定义 了 一 个 日 期 和 时 间 变 量 ( date )。 
@ 第 17 行 代码 通过 Document 对 象 的 title 属性 ， 将 当前 时 间 (date ) 添加 在 标题 栏 (title 对 象 ) 中 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 8.1 所 示 。 


圆 sun pec23 2018 x | 十 


GC ONecalhost 


在 标题 栏 显示 当前 日 期 


8.1 JavaScript 实现 在 标题 栏 显示 当前 日 期 
如 图 8.1 箭头 所 示 ， 页 面 标题 栏 中 成 功 显示 了 通过 JavaScript 脚本 语言 获取 的 当前 日 期 。 


8.3 ”根据 时 间 动 态 显示 标题 欢迎 词 


在 8.2 节 中 ， 我 们 介绍 了 “在 标题 栏 显示 当前 日 期 ”的 JavaScript 语言 代码 实现 。 本 节 将 在 前 
一 节 的 基础 上 继续 介绍 “根据 时 间 动 态 显示 标题 欢迎 词 ” 的 方法 。 下 面 看 一 个 具体 的 JavaScript 代 
码 实例 。 
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01 <!doctype html> 
02 <htm1l lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 根 据 时 间 动 态 显示 标题 欢迎 词 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 </body> 

14 <script type="text/javascript"> 


15 window.onload = function () { 

16 Var date = new Date(); 

a var hour = date.getHours () 7? 

18 if ((hour >= 0) && (hour < 6)) { 

19 document .title = "凌晨 好 !"; 

20 } else if ((hour >= 6) && (hour < 8)) { 
2 document .title = "早晨 好 !"; 

4 } else if ((hour >= 8) && (hour < 12)) { 
2 document .title = "上 午 好 !"; 

24 } else if ((hour >= 12) && (hour < 14)) { 
25 document .title = "中 午 好 !"; 

26 } else if ((hour >= 14) && (hour < 18)) { 
2 了 document .title = "下 午 好 !"; 

28 } else if ((hour >= 18) && (hour < 24)) { 
29 document .title = "晚上 好 !"; 

30 } else { 

31 document .title = date.toString(); 

32 } 

33 } 

34 </script> 

35 </html> 


原 代码 目录 ch08-js-date-dyn-title.html 文件 ) 


关于 【代码 8-3】 的 说 明 : 

e@ 在 第 17 行 代码 中 先 通过 使 用 Date 对 象 的 getHours() 方 法 获取 了 当前 时 间 的 小 时 字段 ( hour )。 

@ 在 第 18~32 行 代码 中 通过 证 条 件 选 择 语句 判断 小 时 字段 (hour ) 落 在 什么 时 间 段 ， 再 将 所 对 
应 的 “标题 欢迎 词 ”通过 Document 对 象 的 title 属性 添加 在 标题 栏 (title ) 中 。 
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下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 8.2 所 示 。 


Sun Dec23 2018 12:56:06 GMT*+0800 (China Standard Time) 
一 一 


Sun Dec 23 2018 15:56.30 GMT*0800 (China Standard Time) 
一 一 一 


图 8.2 JavaScript 实现 根据 时 间 动态 显示 标题 欢迎 词 


如 图 8.2 中 箭头 和 标识 所 示 , 三 个 页 面 中 分 别 演示 了 根据 三 个 不 同时 间 段 动态 显示 标题 欢迎 词 
(“上 午 好 ”“ 中 午 好 ”和 “下 午 好 ”) 的 效果 。 


8.4 根据 月 份 动态 显示 背景 


在 8.3 节 中 ， 我 们 介绍 了 “根据 时 间 动 态 显示 标题 欢迎 词 ”的 JavaScript 语言 代码 实现 。 本 节 
将 在 前 一 节 的 基础 上 , 继续 介绍 一 种 “根据 月 份 动态 显示 背景 ”的 方法 。 下 面 看 一 个 具体 的 JavaScript 
代码 实例 。 


【代码 8-4】( 详 见 源 代码 目录 ch08-js-date-month-bg.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 
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03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 根 据 月 份 改变 背景 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-center" style=""> 


14 <span> 

和 <img id="id-img-bg"” src="" alt=" 正 在 加 载 背 景 . . ."> 

16 </span> 

17 </div> 

18 </body> 

19 <script type="text/javascript"> 

20 window.onload = function () { 

lh Var bgImage = document .getElementById("id-img-bg"); 
ed Var date = new Date(); 

23 var month = date.getMonth() + 1; 

24 if ((month >= 1) && (month <= 12)) { 

25 bgImage.src = "images/calendar-" + month + ".jpg"; 
26 i 

ph } 

28 </script> 

29 </html> 


关于 【代码 8-4】 的 说 明 : 

e@ 第 13~17 行 代码 通过 <div> 标 签 元 素 定义 了 一 个 层 ， 其 中 第 15 行 代码 通过 <img 
id="id-img-bg"> 标 签 元 素 定义 了 一 幅 背 景 图 片 ， 目 标 是 根据 月 份 动态 显示 不 同 的 背景 图 片 。 

@ 第 23 行 代码 通过 使 用 Date 对 象 的 getHours() 方 法 获取 了 当前 时 间 的 月 份 字段 ,注意 , getHours() 
方法 的 返回 值 范围 为 数值 0~ 11， 因 此 返回 值 要 再 加 1 才 会 得 到 正确 的 月 份 (month )。 

@ 第 25 行 代码 通过 将 月 份 (month ) 数值 与 背景 图 片 文件 名 连接 在 一 起 ， 实 现 “ 根 据 月 份 动态 
显示 背景 ”的 效果 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 8.3 所 示 。 


如 图 8.3 中 箭头 所 示 , 两 个 页 面 中 分 别 演示 根据 月 份 动态 显 示 背 景 (“2018 年 12 月 ”和 “2019 
年 1 月 ”) 的 效果 。 


i. 
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根据 月 份 改变 背景 根据 月 份 改变 背景 


图 8.3 JavaScript 实现 根据 月 份 动态 显示 背景 
8.5 格式 化 日 期 的 方法 


在 JavaScript 脚本 语言 中 ， 直 接 通 过 Date 对 象 获取 的 日 期 和 时 间 是 格林 威 治 标准 时 间 格 式 ， 
虽然 这 个 格式 看 上 去 很 酷 很 专业 ， 但 是 对 于 普通 用 户 的 可 读 性 并 不 是 很 好 。 其 实 ， 通 过 Date 对 象 
提供 的 一 系列 方法 再 配合 人 工 编程 方式 ， 完 全 可 以 将 获取 的 日 期 和 时 间 对 象 格式 化 成 我 们 习惯 的 、 
可 读 性 很 好 的 格式 。 下 面 介绍 一 种 简单 、 常 用 的 日 期 格式 化 (YYYY-MM-DD hh:mm:ss) 操作 的 
JavaScript 代码 实例 。 


【代码 8-5】( 详 见 源 代码 目录 ch08-js-date-format.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 日 期 和 时 间 特 效 - 格式 化 日 期 的 方法 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center" style=""> 

14 Today: 

15 <span id="id-span-today"></span> 
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16 格式 化 时 间 : 

1 <span id="id-span-format-date"></span> 

18 </div> 

19 </body> 

20 <script type="text/javascript"> 

之 window.onload = function () { 

22 var date = new Date(); 

23 var today = document .getElementById("id-span-today"); 

24 Var formatToday = document .getElementById("id-span-format-date"); 

2 today.innerText = date.toString() 7 

26 formatToday.innerText = formatDate (date) 7 

27 } 7 

28 function formatDate(d) { 

29 Var curYear = d.getFullYear(); 

30 var curMonth = d.getMonth() + 1; 

3 if (curMonth >= 1 && curMonth <= 9) { 

32 curMonth = "0" + curMonth; 

号 } 

34 var curDate = d.getDate(); 

3 if (curDate >= 0 && curDate <= 9) { 

36 curDate = "0" + curDate; 

37 } 

38 Var curHour = d.getHours () 7 

39 if (curHour >= 0 && curHour <= 9) { 

40 curHour = "0" + curHour; 

41 } 

42 var curMinutes = d.getMinutes(); 

43 if (curMinutes >= 0 && curMinutes <= 9) { 

44 curMinutes = "0" + curMinutes; 

45 

46 Var curSecond = d.getSeconds () 

47 if (curSecond >= 0 && curSecond <= 9) { 

48 curSecond = "0" + curSecond; 

49 } 

50 var arrWeek = [" 星 期 日 "，" 星 期 一 "， "星期 二 "， "星期 三 "， "星期 四 "， 
"星期 五 "， "星期 六 "] ; 

5 Var curDay = arrWeek[d.getDay()]; 

52 // TODO: return format date 

53 return curYear + "-" + curMonth + "~-" + curDate + " "+ curHour + ":" 
+ curMinutes + "+ curSecond 1 * w+ curDay mo rr 

54 } 


55 </script> 
56 </html> 
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关于 【代码 8-5】 的 说 明 : 


@ 第 15 行 和 第 17 行 代码 分 别 通 过 <span> 标 签 元 素 定义 了 两 个 行内 容器 ， 分 别 用 于 显示 正常 未 
格式 化 的 日 期 和 格式 化 后 的 日 期 。 

@ 第 28~54 行 代码 定义 的 formatDate() 方 法 用 于 实现 对 正常 日 期 的 格式 化 操作 。 其 中 ， 在 第 29 
行 代码 中 通过 getFullYear() 方 法 获取 了 年 份 字段 ， 在 第 30 行 代码 中 通过 getMonth() 方 法 获取 
了 月 份 字段 (注意 加 1 操作 )， 在 第 34 行 代码 中 通过 getDate() 方 法 获取 了 日 期 字段 ， 在 第 38 
行 代码 中 通过 getHours() 方 法 获取 了 小 时 字段 ,在 第 42 行 代码 中 通过 getMinutes() 方 法 获取 了 
分 钟 字段 ， 在 第 46 行 代码 中 通过 getSeconds() 方 法 获取 了 秒 数 字段 。 另 外 ， 对 于 一 位 数字 的 
日 期 和 时 间 字 段 ， 均 统一 转换 为 了 两 位 数字 ,这样 的 显示 效果 会 更 美观 。 第 50 行 代码 定义 了 
一 个 从 星期 日 到 星期 六 的 数组 (arrWeek )， 并 在 第 51 行 代码 中 通过 getDay() 方 法 获取 当前 日 
期 是 星期 几 。 第 53 行 代码 通过 将 前 面 获 取 的 一 系列 关于 日 期 和 时 间 的 信息 , 按照 格式 化 日 期 

(YYYY-MM-DD hh:mm:ss ) 的 方式 连接 到 一 起 ， 并 作为 formatDate() 方 法 的 返回 值 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 8.4 所 示 。 
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Javascript 日 期 和 时 间 特 效 - 格式 化 日 期 的 方法 


Today: Mon Dec 24 2018 00:08:53 GMT+0800 (China Standard Time) 
格式 化 时 间 : 2018-12-24 00:08:53 星期 一 . 


图 8.4 JavaScript 实现 格式 化 日 期 的 方法 


如 图 8.4 中 箭头 所 示 ， 页 面 中 分 别 演示 了 标准 格林 尼 治 时 间 以 及 格式 化 (YYYY-MM-DD 
hh:mm:ss) 日 期 和 时 间 的 效果 。 


8.6 判断 今天 是 否 为 节假日 


在 很 多 日 历 应 用 〈App) 中 ， 如 果 今天 是 节假日 (包括 双休日 和 国家 法 定 节假日 ) 在 显示 效果 
上 均 会 有 所 区 别 。 其 实 ， 通 过 JavaScript 脚本 语言 可 以 有 效 地 判断 出 双休日 ， 然 后 针对 国家 法 定 节 
假日 设 定 特殊 的 算法 。 下 面 介绍 一 个 通过 JavaScript 实现 判断 今天 是 否 为 节假日 的 代码 实例 。 


【代码 8-6】( 详 见 源 代码 目录 ch08-js-date-holidayhtml 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 
03 <head> 
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04 <!-- 添加 文档 头 部 内 容 --> 
05 <title>JavaScript 全 程 实例 </title> 
06 </head> 
07 <body> 
08 <!-- 添加 文档 主体 内 容 --> 
09 <header> 
10 <nav> 判 断 今天 是 否 为 节假日 </nav> 
11 </header> 
12 <!-- 添加 文档 主体 内 容 --> 
13 <div id="id-div-center" style: > 
14 今天 是 :<span id="id-span-date"></span> 
I 今天 是 :<span id="id-span-hw"></span> 
16 </div> 
17 </body> 
18 <script type="text/javascript"> 
19 window.onload = function () { 
20 var today = document .getElementById("id-span-date"); 
El Var holiday weekend = document .getElementById("id-span-hw"); 
22 var date = new Date(); 
23 today.innerText = curDate(date); 
24 holiday weekend.innerText = getHolidayWeekend (date); 
25 }; 
26 function curDate(d) { 
27 var arrWeek = [" 星 期 日 "，" 星 期 一 "，" 星 期 二 "，" 星 期 三 "，" 星 期 四 "， 
"星期 五 "，" 星 期 六 "] ; 
28 Var curYear = d.getFullYear(); 
29 var curMonth = d.getMonth() + 1; 
30 Var curDate = d.getDate(); 
3 Var curDay = arrWeek[d.getDay()]; 
32 return CurYear + "=" + CUurMonth + "=" + curDate + ™ ™ + CurDay + "ys 
33 } 
34 function getHolidayWeekend(d) { 
3 var vHolidayWeekend; 
36 var hMonth = d.getMonth() + 1; 
EE Var hDate = d.getDate(); 
38 var hDay = d.getDay() 7 
eh if (hDate == 1) { 
40 if (hMonth == 1) { 
41 vHolidayWeekend = "新 年 元 旦 "; 
42 } else if (hMonth == 5) { 
43 vHolidayWeekend = "五 一 劳动 节 "; 
44 } else if (hMonth == 10) { 
45 vHolidayWeekend = "十 一 国庆 节 "; 
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} else { 
} 

else if ((hMonth == 3) && (hDate == 8)) { 
vHolidayWeekend = "三 八 妇女 节 "; 

else if ((hMonth == 4) && (hDate == 5)) { 


vHolidayWeekend = "清明 节 "; 


} else if ((hMonth == 8) && (hDate == 15)) { 
vHolidayWeekend = "中 秋 节 "; 
} else { 


if(isWeekend(d)) { 
vHolidayWeekend = "周末 (六 日 )"; 
} else { 
vHolidayWeekend = "工作 日 "; 


} 
return vHolidayWeekend; 
} 
function isWeekend(d) { 
var hDay = d.getDay(); 
if ((hDay == 0) || (hDay == 6)) { 
return true; 
} else { 


return false; 


2. 
</script> 
</html> 


关于 【代码 8-6】 的 说 明 : 


@ 第 14~15 行 代码 通过 <span> 标 签 元 素 定义 了 两 个 行内 容器 , 第 一 个 用 于 显示 当前 日 期 , 第 二 


个 用 于 显示 当前 日 期 是 否 为 节假日 的 判断 结果 。 

第 26 ~ 33 行 代码 定义 的 curDate() 方 法 用 于 获取 当前 日 期 (格式 为 YYYY-MM-DD Week )。 

第 34~62 行 代码 定义 的 getHolidayWeekend() 方 法 用 于 判断 当前 日 期 是 否 为 节假日 ， 这 里 的 
节假日 包括 元 旦 、 五 一 劳动 节 、 十 一 国庆 节 、 三 八 妇女 节 、 清 明 节 和 中 秋 节 ， 还 包括 正常 的 
周末 ( 周 六 和 周 日 ) 休息 日 。 因 为 类 似 元 旦 或 五 一 劳动 节 这 类 的 节假日 都 是 有 固定 日 期 的 ， 
所 以 在 第 19 ~ 54 行 代码 中 通过 判断 当前 日 期 是 否 为 这 些 固定 日 期 来 甄别 是 否 为 节假日 .而 在 
第 55 ~ 59 行 代码 中 ， 通 过 调用 isWeekend() 方 法 来 判断 当前 日 期 是 否 为 周末 休息 日 。 


@ 第 63~70 行 代码 定义 的 是 isWeekend() 方 法 的 实现 过 程 .其 中 ,第 64 行 代码 通过 调用 getDay() 


方法 获取 了 当前 日 期 是 星期 几 ， 然 后 第 65~69 行 代码 判断 是 否 为 周 六 或 周 日 (通过 布尔 值 
返回 )。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 8.5 所 示 。 
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判断 今天 是 否 为 节假日 判断 今天 是 否 为 节假日 


今天 是 : 2019-1-1 星期 二 . 


人 


图 8.5_ JavaScript 实现 判断 今天 是 否 为 节假日 


如 图 8.5 中 箭头 所 示 , 两 个 页 面 中 分 别 演示 了 新 年 元 旦 (2019 年 1 月 1 日) 和 平时 工作 日 (2019 
年 1 月 8 日 ) 的 效果 。 


今天 是 : 2019-1-8 星期 二 . 
今天 是 : 工作 日 


8.7 每 秒 刷新 的 时 间 展 示 效 果 


通过 JavaScript 的 Date 对 象 可 以 获取 详细 的 时 间 参 数 ， 如 果 结 合 使 用 setInterval() 函 数 进行 定 
时 ， 就 可 以 在 页 面 中 模拟 出 每 秒 刷 新 的 时 间 展 示 效 果 。 下 面 看 一 个 具体 的 JavaScript 代码 实例 。 


【代码 8-7】( 详 见 源 代码 目录 ch08-js-date-timer.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 每 秒 刷 新 的 时 间 展 示 效果 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center" style=""> 
14 每 秒 刷 新 的 时 间 展 示 效 果 : 

33 <span id="id-span-timer"></span> 
16 </div> 

17 </body> 

18 <script type="text/javascript"> 
19 window.onload = function () { 


20 // TODO: 使 用 setInterval 函数 进行 定时 
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pr window.setInterval (function () { 

5 // TODO: 得 到 当前 的 时 间 对 象 

23 var date = new Date(); 

24 ear or = // TODO: 定义 拼接 的 字符 变量 
25 // TODO: 得 到 小 时 数 

26 str += date.getHours(); 

2 str += 1317 // TODO: 拼接 冒号 

28 // TODO: 得 到 分 钟 数 

29 str += date.getMinutes () 7 

30 str += 7577 // TODO: 拼接 冒号 

3 // TODO: 得 到 秒 数 

32 str += date.getSeconds () 7 

33 // TODO: 把 结果 显示 出 来 

34 document .getElementById('id-span-timer') .innerHTML = str; 
35 }，1000); ”// Topo: 间隔 为 1 秒 

36 Fs 

37 </script> 

38 </html> 


关于 【代码 8-7】 的 说 明 : 

@ 第 15 行 代码 通过 <span> 标 签 元 素 定 义 了 一 个 行内 容器 ， 用 于 实现 每 秒 刷新 的 时 间 展 示 效 果 。 

@ 第 21~35 行 代码 通过 调用 Window 对 象 的 setInterval() 方 法 进行 定时 ， 时 间 间 隔 定义 为 1 秒 。 
其 中 ， 第 26 行 、 第 29 行 和 第 32 行 代码 分 别 通过 调用 getHours() 方 法 、getMinutes() 方 法 和 
getSeconds() 方 法 获取 了 小 时 、 分 钟 和 秒 数 ， 并 通过 str 变量 连接 为 一 个 时 间 格 式 (hh:mm:ss )。 
借助 于 setInterval() 方 法 设 定 1 秒 定 时 ， 因 此 在 页 面 中 实现 每 秒 刷新 的 时 间 展 示 效 果 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 8.6 所 示 。 
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每 秒 刷新 的 时 间 展 示 效 果 


每 秒 刷新 的 时 间 展 示 效 果 : 10:59:25 


8.6 JavaScript 实现 每 秒 刷新 的 时 间 展 示 效 果 
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8.8 时 间 计 时 器 


我 们 接着 8.7 节 的 内 容 继 续 介绍 , 其 实 通过 使 用 setInterval() 函 数 定时 功能 , 还 可 以 实现 时 间 计 
时 器 的 功能 。 下 面 看 一 个 具体 的 JavaScript 代码 实例 。 


【代码 8-8】( 详 见 源 代码 目录 ch08-js-date-start-timerhtml 文件 ) 


01 <!doctype html> 
02 <htm1l lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 日 期 和 时 间 特 效 - 时 间 计 时 器 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-center" style=""> 


14 时 间 计 时 器 :<span id="id-span-start-timer"></span> 
215 <button id="id-btn-start-timer" onclick="start timer(this.id)"> 
开始 计时 器 </button> 
16 </div> 
17 </body> 
18 <script type="text/javascript"> 
19 var iHours = 0; // TODO: 定义 小 时 的 整数 变量 
20 var iMinutes = 0; // TODO: 定义 分 钟 的 整数 变量 
21 var iSeconds = 0; // TODO: 定义 秒 数 的 整数 变量 
22 var strHours = "00"; // TODO: 定义 小 时 的 字符 变量 
23 var strMinutes = "00"; // TODO: 定义 分 钟 的 字符 变量 
24 var strSeconds = "00"; // TODO: 定义 秒 数 的 字符 变量 
25 Var strTimer; 
26 window.onload = function (ev) { 
人 27 // TODO: 定义 计时 器 拼接 的 字符 变量 
28 strTimer = strHours + ":" + strMinutes + ":" + strSeconds; 
29 document .getElementById('id-span-start-timer'). 
innerHTML = strTimer; 
30 ] 7 
3 function start timer(thisid) { 


32 // TODO: 使 用 setInterval 函数 进行 定时 
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33 window.setInterval (function () { 

34 iSeconds++7 

35 if (iSeconds==60){ 

26. iSeconds = 0; 

37 iMinutes++; 

38 if(iMinutes==60){ 

39 iMinutes = 0; 

40 iHourst++; 

41 } 

42 } elsef 

43 strSeconds = iSeconds.toString(); 

44 if(strSeconds.length == 1) 

45 strSeconds = "0" + strSeconds; 

46 strMinutes = iMinutes.toString(); 

47 if(strMinutes.length == 1) 

48 strMinutes = "0" + strMinutes; 

49 strHours = iHours.toString(); 

50 if(strHours.length == 1) 

51 strHours = "0" + strHours; 

52 } 

53 strTimer = strHours + ":" + strMinutes + ":" + strSeconds; 

54 document .getElementById('id-span-start-timer'). 
innerHTML = strTimer; 

55 }，1000); ”// TODO: 间隔 为 1 秒 

56 } 

57 </script> 

58 </html> 


关于 【代码 8-8】 的 说 明 : 


@ 第 14 行 代码 通过 <span> 标 签 元 素 定 义 了 一 个 行内 容器 ， 用 于 实现 时 间 计 时 器 的 展示 效果 。 

@ 第 15 行 代码 通过 <button> 标 签 元 素 定 义 了 一 个 按钮 ， 添 加 了 onclick 事件 处 理 方 法 
(start_timer() )， 用 户 可 以 单 击 该 按钮 执行 开始 计时 器 的 操作 。 

@ 第 31~56 行 代码 是 start timer() 方 法 的 实现 过 程 ， 其 中 第 33 ~ 55 行 代 码 通 过 调用 Window 对 
象 的 setInterval() 方 法 进行 定时 ,时 间 间 隔 定义 为 1 秒 。 每 次 定时 (1 秒 ) 完成 后 , 通过 第 19 ~ 
24 行 代码 定义 的 变量 ( 小时、 分 钟 和 秒 数 ) 进行 累加 操作 ， 然 后 在 第 53 行 代码 中 将 计时 器 
整合 成 字符 串 格式 保存 在 第 25 行 代码 定义 的 变量 ( strTimer ) 中 ,最 后 通过 第 54 行 代码 在 页 
面 中 进行 显示 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 8.7 所 示 。 

如 图 8.7 中 箭头 所 示 ， 左 边 页 面 中 为 时 间 计 时 器 初始 状态 ， 通 过 单 击 “ 开 始 计时 器 ”操作 后 ， 


右边 页 面 中 演示 了 时 间 计时 器 运行 的 效果 (00:03:18) 。 
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贺 Javascript 人 Es= x 十 一 口 x 


QC © localhost 加 作 GC © localhost “» = 


Javascript 日 期 和 时 间 特 效 - 时 间 计时 器 JavaScript 日 期 和 时 间 特 效 - 时 间 计时 器 


时 间 计时 器 :00:03:18 


图 8.7 JavaScript 实现 时 间 计 时 器 
8.9 时 间 倒 计时 器 


前 一 小 节 实 现时 间 计 时 器 的 功能 ， 接 着 我 们 逆向 思维 来 实现 时 间 倒 计时 器 的 功能 。 下 面 ， 看 
一 个 具体 的 JavaScript 代码 实例 。 


【代码 8-9】( 详 代码 目录 ch08-js-date-count-down.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 日 期 和 时 间 特 效 - 时 间 倒 计时 器 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center" style=""> 

14 时 间 倒 计时 器 :<span id="id-span-count-down"></span> 

15 起 始 时 间 : gnbsp; snbsp;<input type="text" id="id-input-init-time" 
value="1"> 分 钟 

16 <button id="id-btn-count-down" onclick="count_down (this.id)"> 开 始 倒计时 

</button> 

TT /dn 

18 </body> 

19 <script type="text/javascript"> 
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20 
21 
22 
wi 
24 
25 
26 
py 
28 
29 
E10] 
3 


32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
5 
58 
59 
60 
61 


var iHours = 0; // TODO: 定义 小 时 的 整数 变量 
var iMinutes = 0; // TODO: 定义 分 钟 的 整数 变量 
var iSeconds = 0; // TODO: 定义 秒 数 的 整数 变量 
var strHours = "00"7 // TODO: 定义 小 时 的 字符 变量 
var strMinutes = "00"; // TODO: 定义 分 钟 的 字符 变量 
var strSeconds = "00"; // TODO: 定义 秒 数 的 字符 变量 
var strTimer; 
window.onload = function (ev) { 
init time(); 
// TODO: 定义 计时 器 拼接 的 字符 变量 
strTimer = strHours + ":" + strMinutes + ":" + strSeconds; 
document .getElementById('id-span-count-down'). 
innerHTML = strTimer; 
]5 
function init time() { 
iMinutes = document .getElementById("id-input-init-time") .value; 
strMinutes = iMinutes.toString(); 
if (strMinutes.length == 1) 
strMinutes = "0" + strMinutes; 
时 
function count_down (thisid) { 
init time() 
// TODO: 使 用 setInterval 函数 进行 定时 
window.setInterval (function () { 
if (iSeconds == 0) { 
if (iMinutes > 0) { 
iMinutes--; 
strMinutes = iMinutes.toString(); 
if (strMinutes.length == 1) 
strMinutes = "0" + strMinutes; 
iSeconds = 60; 
iSeconds--; 
strSeconds = iSeconds.toString(); 
if (strSeconds.length == 1) 
strSeconds = "0" + strSeconds; 


} else if (iMinutes == 0) { 
strMinutes = "00"; 
} else { 


} 

} else if (iSeconds > 0) { 
iSeconds--; 
strSeconds = iSeconds.toString(); 
if (strSeconds.length == 1) 
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62 strSeconds = "0" + strSeconds; 
63 } else { 
64 } 
65 strTimer = strHours + ":" + strMinutes + ":" + strSeconds; 
66 document .getElementById('id-span-count-down'). 
innerHTML = strTimer; 
67 }，1000); ”// Topo: 间隔 为 1 秒 
68 } 
69 </script> 
70 </html> 


关于 【代码 8-9】 的 说 明 : 


第 14 行 代码 通过 <span> 标 签 元 素 定义 了 一 个 行内 容器 ， 用 于 实现 时 间 倒 计时 器 的 展示 效果 。 
第 15 行 代码 通过 <input> 标 签 元 素 定义 了 一 个 文本 框 ， 用 于 用 户 定义 时 间 倒 计时 器 的 初始 时 
间 (默认 值 为 1 分 钟 )。 


@ 第 16 行 代码 通过 <button> 标 签 元 素 定义 了 一 个 按钮 ， 添 加 了 onclick 事件 处 理 方法 


(count_ down() )， 用 户 可 以 单 击 该 按钮 执行 开始 倒计时 器 的 操作 。 

第 33 ~ 38 行 代码 是 init_time() 方 法 的 实现 过 程 ,该 方法 用 于 获取 用 户 输入 的 倒计时 初始 时 间 。 
第 39 ~ 68 行 代 码 是 count down() 方 法 的 实现 过 程 ， 其 中 第 42 ~ 67 行 代码 通过 调用 Window 
对 象 的 setInterval() 方 法 进行 定时 ， 时 间 间 隔 定 义 为 1 秒 。 每 次 定时 (1 秒 ) 完成 后 ， 通 过 第 
20~25 行 代 码 定 义 的 变量 (小 时 、 分 钟 和 秒 数 ) 进行 累 减 操作 ， 然 后 在 第 65 行 代码 中 将 计 
时 器 整合 成 字符 串 格 式 保存 在 第 26 行 代码 定义 的 变量 ( strTimer ) 中 ,最 后 通过 第 66 行 代码 
在 页 面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 8.8 和 图 8.9 所 示 。 


贺 JavaScript 全 得 X | 十 国 JavaScript 全 得 Xx | 于 = 


QC © localhost oo 六 


CC © localhost 回信 


Javascript 日 期 和 时 间 特 效 - 时 间 倒计时 器 JavaScript 日 期 和 时 间 特 效 - 时 间 倒 计时 器 


计时 ” 


8.8 ”JavaScript 实现 时 间 倒计时 器 (一) 


如 图 8.8 中 箭头 所 示 ， 左 边 页 面 中 为 时 间 倒 计时 器 初始 状态 〈00:01:00) ， 通 过 单 击 “ 开 始 倒 
”按钮 操作 后 ， 右 边 页 面 中 演示 了 时 间 倒 计时 器 运行 的 效果 〈00:00:55) 。 
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贺 Javascript 全 Es= x | 十 一 口 县 贺 ,Javascript 人 E= x 十 一 口 x 


CG © localhost 加 


y GG © localhost 回信 


Javascript 日 期 和 时间 特效 - 时 间 倒计时 器 Javascript 日 期 和 时 间 特 效 - 时 间 倒计时 器 
时 间 倒 计时 器 : 00:01:00 时 间 倒 计时 器 : 00:02:55 
起 始 时 间 : A 开始 倒计时 起 始 时 间 : | 3 盼 钟 


8.9 JavaScript 实现 时 间 倒 计时 器 (二 ) 


如 图 8.9 中 第 头 所 示 ， 左 边 页 面 中 为 时 间 倒 计时 器 初始 状态 ， 用 户 手 动 输入 了 起 始 时 间 (3 分 
钟 ), 通过 单 击 “ 开 始 倒计时 ”按钮 操作 后 , 右边 页 面 中 演示 了 时 间 倒计时 器 运行 的 效果 (00:02:55 ) 。 


8.10 ”计算 时 间 差 


在 JavaScript 脚本 语言 中 ，Date 对 象 提供 了 一 个 getTime() 方 法 ， 可 以 获取 任 一 时 间 与 1970 年 
1 月 1 日 零点 之 间 的 时 间 差 (毫秒 单位 )。 利 用 getTime() 方 法 就 可 以 很 容易 地 计算 出 任意 两 个 时 间 
节点 之 间 的 时 间 差 。 

下 面 介绍 一 个 通过 JavaScript 实现 计算 任意 两 个 时 间 节 点 时 间 差 的 代码 实例 。 


【代码 8-10】( 详 见 源 代码 目录 ch08-js-date-cal-interval.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 日 期 和 时 间 特 效 - 计算 时 间 差 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-center" style=""> 


14 <labe1> 第 一 个 时 间 (2019-01-08 10:10:10) :</label> 
了 <input type="text" name="timel" id="id-time-1"/> 
16 <labe1> 第 二 个 时 间 (2019-01-10 22:22:22) :</label> 


1 <input type="text" name="time2" id="id-time-2"/> 
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18 <input type="button" value=" 计 算 " onclick="calTimeInterval();"/> 
19 <span id="id-time-interval"></span> 

20 </div> 

21 </body> 

22 <script type="text/javascript"> 

23 // TODO: calculate time interval 

24 function calTimeInterval() { 

25 var timel = document .getElementById('id-time-1') .value; 
26 var time2 = document .getElementById('id-time-2') .value; 
Eh var tl1 = parseTime (timel); 

28 var t2 = parseTime (time2); 

29 var span = tl.getTime() - t2.getTime(); 

30 span = Math.abs (span / 1000); 

3 document .getElementById("id-time-interval"). innerText = 


"两 个 时 间 相 差 '+span+' 秒 .'7 


32 下 

33 光村 家 

34 * parse time 

EE * @param str 

36 * @returns {Date} 

忆 交 | bad 

38 function parseTime(str) { 

39 var date = str.split(' ') [0]; 
40 var darr = date.split('-'); 
41 var time = str.split(' ')[1]; 
42 Var tarr = time.split(':'); 
43 var y = parseInt (darr[0]); 

44 var m = parseInt (darr[1]); 

45 var d = parseInt (darr[2]); 

46 var h = parseInt (tarr[0]); 

47 Var mm = parselInt (tarr[1]); 
48 Var s = parselInt (tarr[2]); 

49 return new Datel(y, m, d, h, mm, s); 
50 } 

51 </script> 

52 </html> 


关于 【代码 8-10】 的 说 明 : 

@ 第 15 行 和 第 17 行 代码 通过 <input> 标 签 元 素 定义 了 两 个 文本 框 ， 用 于 用 户 输入 两 个 时 间 节 点 
(注意 格式 为 : YYYY-MM-DD hh:mm:ss )。 

@ 第 18 行 代码 通过 <inpuf> 标 签 元 素 定 义 了 一 个 按钮 ， 添 加 了 onclick 事件 处 理 方法 
(calTimeInterval() )， 用 户 可 以 单 击 该 按钮 执 计算 时 间 差 的 操作 。 
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@ 第 24~32 行 代码 是 calTimelInterval() 方 法 的 实现 过 程 。 其中， 第 27~28 行 代码 通过 调用 自 定 
义 方法 (parseTime() ) 来 解析 时 间 节 点 (返回 Date 类 型 ) 第 29 行 代码 通过 调用 getTime() 
方法 获取 这 两 个 时 间 节 点 与 1970 年 1 月 1 日 零点 之 间 的 时 间 差 (毫秒 单位 )。 

@ 第 38 ~50 行 代 码 是 parseTime() 方 法 的 实现 过 程 ， 该 方法 负责 将 时 间 节 点 ( 格式: 
YYYY-MM-DD hh:mm:ss ) 解析 为 Date 类 型 并 返回 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 8.10 所 示 。 


国 Javascript 全 程 实例 国 Javascript 全 程 实例 Xx | 十 = 口 Se 


> GC © localhost63342 中 全 》 


>》 GC © localhost63342 回合 


JavaScript 日 期 和 时 间 特 效 - 计算 时 间 差 Javascript 日 期 和 时 间 特 效 - 计算 时 间 差 


第 一 个 时 间 (2019-01-08 10:10:10): |2019-01-08 10:10:10 第 一 个 时 间 (2019-01-08 10:10:10): |2019-01-08 10:10:10 


2019-01-10 22:22:22 


第 二 个 时 间 (2019-01-10 22:22:22): 第 二 个 时 间 (2019-01-10 22:22:22): |2019-01-10 22:22:22 


计算 两 个 时 间 相差 216732 秒 , 


图 8.10 JavaScript 实现 计算 时 间 差 


如 图 8.10 中 箭头 所 示 ， 左 边 页 面 中 填 入 了 两 个 时 间 节 点 ， 通 过 单 击 “ 计 算 ” 按 钮 后 ， 右 边 页 
面 中 显示 了 两 个 时 间 节 点 的 时 间 差 (216732 秒 ) 。 


8.11 计算 日 期 间隔 


在 8.10 节 中 ， 我 们 实现 了 计算 任意 两 个 时 间 节 点 之 间 的 时 间 差 功能 。 不 过 这 个 时 间 差 的 计算 
结果 是 以 “ 秒 ” 为 单位 的 ， 可 读 性 不 是 很 好 。 在 本 节 中 ， 我 们 继续 改进 一 下 代码 ， 直 接 计 算出 任意 
两 个 时 间 节 点 之 间 的 日 期 间隔 。 下 面 看 一 个 具体 的 JavaScript 代码 实例 。 


【代码 8-11】( 详 见 源 代码 目录 ch08-js-date-cal-d2d.html 文件 ) 


01 <script type="text/javascript"> 

02 function calDateInterval() { 

03 var timel = document .getElementById('id-time-1') .value; 
04 Var time2 = document .getElementById('id-time-2') .value; 
05 Var tl = parseTime (timel); 

06 Var t2 = parseTime (time2); 

07 Var span = tl.getTime() - t2.getTime(); 

08 span = Math.abs(span / 1000); 

09 var d2d = parseDate (span); 
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10 document .getElementById("id-date-interval") .innerText = 
"两 个 日 期 间隔 : ' + d2d + ' .0 

本 } 

2 function ParseTime (str) { 

13 var date = Str.split(" ")[0ls 

14 var darr = date.split('-'); 

15 Var time = str.split(' ')[1]; 

16 Var tarr = time.split(':'); 

by var y = parseInt (darr[0]); 

18 var m = parseInt (darr[1]); 

19 var d = parseInt (darr[2]); 

20 var h = parseInt (tarr[0]); 

2 遇 Var mm = parseInt (tarr[1]); 

Ed var s = parseInt (tarr[2]); 

要 3 return new Datel(y, m, d, h, mm, s); 

24 } 

poe function parseDate(sec) { 

26 var seconds = sec % 60; 

2 var minutes = Math.floor(sec / 60); 

28 var hours = Math.floor (minutes / 60); 

29 var days = Math.floor (hours / 24); 

30 var s = seconds; 

3 出 var m = minutes - hours * 60; 

32 var h = hours - days * 24; 

39 var d = days; 

34 return days + "天 "+ h + "小 时 "+ m+ "分钟 " + s + " 秒 "; 

35 中 


36 </script> 


关于 【代码 8-11】 的 说 明 : 

@ 【代码 8-11】 主 要 是 在 【代码 8-10】 的 基础 上 修改 而 成 的 ， 关 键 部 分 就 是 增加 了 一 个 自 定义 
parseDate() 方 法 。 

@ 第 25~35 行 代码 是 parseDate() 方 法 的 实现 过 程 ， 该 方法 负责 将 计算 得 出 的 时 间 间 隔 ( 秒 ) 解 
析 为 “xx 天 xx 小 时 xx 分钟 xx 秒 " 的 字符 串 格 式 并 返回 .这 里 主要 是 借助 了 Math 对 象 的 floor() 
方法 ， 将 时 间 换 算 后 进行 了 向 下 取 整 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 8.11 所 示 。 
如 图 8.11 中 箭头 所 示 ， 左 边 页 面 中 填 入 了 两 个 时 间 节 点 ， 通 过 单 击 “ 计 算 ” 按 钮 后 ， 右 边 页 
面 中 显示 了 两 个 日 期 的 间隔 (2 天 12 小 时 12 分 钟 12 秒 ) 。 
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国 Javascript 全 生 安 全 x 国 Javascipt 全 实例 x 


3 G © localhost63342 下 回合 » y CG © localhost63342 下 回合» 


Javascript 日 其 和 时 间 特 效 - 计算 日 期 间隔 Javascript 日 期 和 时 间 特效 - 计算 日 期 间隔 


第 一 个 时 间 (2019-01-08 10:10:10):。[2019-01-08 1 


第 一 个 时 间 (2019-01-08 10:10:10): [2019-01-08 10:10:10 


第 二 个 BJ 间 (2019-01-10 22:22:22): 第 二 个 时 间 (2019-01-10 22:22:22): [2019-01-10 


:22:22 


计算 两 个 日 期 间 帮 : 2 天 12 小 时 12 分 钟 12 秒 . 


8.11 JavaScript 实现 计算 日 期 间隔 


8.12 网 页 标题 体现 月 进度 


通常 一 个 月 分 为 上 、 中 、 下 旬 ， 合 理 安排 好 时 间 是 月 计划 能 够 按照 进度 完成 的 有 力 保障 。 在 
本 节 中 ， 我 们 实现 一 个 网 页 标题 能 够 体现 月 进度 (上 、 中 、 下 名) 变化 的 页 面 效 果 。 下 面 看 一 下 具 
体 的 JavaScript 代码 实例 。 


-js-date-month-title.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 日 期 和 时 间 特 效 - 网 页 标题 体现 月 进度 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-center" style=""> 


14 <span id="id-span-date"></span> 
15 </div> 

16 </body> 

17 <script type="text/javascript"> 

18 window.onload = function () { 
9 var strTitle; 

20 var date = new Date(); 

wl var d = date.getDate(); 


多 f(a <= 10y { 
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23 strTitle = "上 旬 ， 请 安排 好 月 计划 ' ; 

24 } else if(d > 10 && d <= 20) { 

25 strTitle = ' 中 旬 ， 请 合理 安排 时 间 ' ; 

26 } else if(d > 20) { 

27 strTitle = "下 名， 请 抓紧 完成 月 计划 ' 7 
28 } else { 

29 StrTitle = ”7 

30 } 

3 document .title = strTitle; 

| var today = date.toLocaleDatesString(); 
| document .getElementById('id-span-date') .innerText = "今天 :" + today; 
34 ] 7 

35 </script> 

36 </html> 


关于 【代码 8-12】 的 说 明 : 

@ 第 21 行 代码 通过 getDate() 方 法 获取 了 当前 日 期 。 

e@ 第 22~30 行 代码 通过 f 条 件 语 名 判断 当前 日 期 是 月 上 旬 、 中 和 多 或 下 多 ， 并 根据 判断 结果 定 
义 不 同 的 网 页 标题 信息 ( strTitle )。 

@ 第 31 行 代码 通过 将 网 页 标题 信息 (strTitle ) 赋 给 Document 对 象 的 title 属性 来 实现 网 页 标题 
体现 月 进度 的 效果 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 8.12 所 示 。 
| 


国 .请 这 #BRi 计 划 *| 国 - ox 


人 天 1262019 


8.12 JavaScript 实现 网 页 标题 体现 月 进度 
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8.13 ”用 表格 制作 日 历 


在 HTML 页 面 中 ， 日 期 的 最 常用 表现 形式 就 是 日 历 控件 了 。 一 般 来 讲 ， 一 年 是 12 个 月 份 ， 每 
个 月 份 是 30 天 左右 ， 按 照 一 周 7 天 来 排序 ， 每 个 月 份 用 一 个 7 列 的 表格 就 可 以 很 清晰 的 表示 出 来 
了 。 其 实 ， 常 规 的 HTML 日 历 控件 就 可 以 使 用 表格 <table> 元 素 ， 再 结合 JavaScript 脚本 语言 动态 
编程 制作 出 来 。 

下 面 ， 具 体 介绍 一 个 通过 JavaScript 实现 用 表格 制作 日 历 的 代码 实例 。 


【代码 8-13】( 详 见 源 代码 目录 ch08-js-date-tb-calendarhtml 文件 ) 


001 <!doctype html> 
002 <html lang="en"> 


003 <head> 

004 <!-- 添加 文档 头 部 内 容 --> 

005 <title>JavaScript 全 程 实例 </title> 
006 </head> 

007 <body> 


008 <!-- 添加 文档 主体 内 容 --> 

009 <header> 

010 <nav>JavaScript 日 期 和 时 间 特 效 - 用 表格 制作 日 历 </nav> 
011 </header> 

012 <!-- 添加 文档 主体 内 容 --> 


013 <div id="id-div-center"> 


014 <p> 

015 点 击 选择 日 历 : 

016 <select id="y"></select> 年 

017 <select id="m"></select> 月 

018 </p> 

019 <table id="id-tb-date" border="1" align="center"></table> 
020 <span id="id-span-info"></span> 

021 </div> 


022 </body> 
023 <script type="text/javascript"> 


024 window.onload = function () { 

025 Var y = document .getElementById('y'); 

026 Var m = document .getElementById('m'); 

027 Var str = "ns; 

028 for (let i = 2019; i <= 2020; i++) { 

029 Stry t= xoptlion value=™ TI </option> "sy 
030 . 


031 y.innerHTML = StrY7 
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032 StrM= ""; 

033 For (lot Dm Me cm Es 注 

034 strM += '<option value="' +j+ '">' +j + '</option>'; 

035 } 

036 m.innerHTML = strM; 

037 m.onchange = function () { 

038 var year = document .getElementById('y') .value; 

039 year = parseInt (year); 

040 Var month = ParseInt (this.value); 

041 var days = 31; 

042 if (isRunYear(year) && month == 2) { 

043 days = 29; 

044 } else if (!isRunYear (Year) && month == 2) { 

045 days = 28; 

046 } else if (month == 

047 11 month 

048 11 month 

049 11 month == 11) { 

050 days = 30; 

051 } 

052 var ariMeek = 1 2 

053 Var strW = '<tr>'; 

054 for (var Ww = OF Ww < Ty Witty { 

055 strW += '<td> 星 期 ' + arrWeek[w] + '</td>'; 

056 1 

057 strW += '</tr>'; 

058 Var date = new Date(year, month -~ 1, 1); 

059 var week = date.getDay(); 

060 if (week == 7) 

061 week = 0; 

062 var j= 1; 

063 while (true) { 

064 strW += '<tr>'; 

065 Sor Mrar A = OR I ST lh 

066 if (j == 1 && i == week) { 

067 strW += '<td onclick="showDay (this,'+j+',"'+i+');">1 

</td>'; 

068 rE 

069 } else if (j >1 gg j <= days) { 

070 strW += '<td onclick="showDay (this, "+j+',"'+i+');">" 
证 贞 二 

071 j++; 

072 yy -olse 
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073 strW += '<td>gnbsp;</td>'; 

074 

075 strW += '</tr>'; 

076 if (j > days) 

077 break; 

078 } 

079 document .getElementById('id-tb-date') .innerHTML = strW; 

080 }; 

081 ys 

082 function isRunYear(y) { 

083 return y % 4 == 0; 

084 } 

085 function showDay(el, d, w) { 

086 console.log(el); 

087 setTbBgColor (el); 

088 var y = document .getElementById('y') .value; 

089 var m = document .getElementById('m') .value; 

090 war arem = rT 

091 var strW = ' 星 期 '; 

092 £0r (let Lm Or < 7 tt) 

093 if (i == w) { 

094 strW += arrW[il; 

095 break; 

096 } 

097 } 

098 var strInfo =' 您 选择 的 日 期 是 : ' + y + ' 年 + m+ ' 月 +d+' 日 ， 
让 

099 document .getElementById('id-span-info') .innerText = strInfo; 

100 } 

101 function setTbBgColor(el) { 

102 Var tds = document .getElementsByTagName ("td"); 

103 for (let i = 0; i < tds.length; i++) { 

104 tds [i] .style.backgroundColor = ""; 

105 

106 el.style.backgroundColor = "gray"; 

107 } 


108 </script> 
109 </html> 


关于 【代码 8-13】 的 说 明 : 


@ 第 016 行 和 第 017 行 代码 分 别 使 用 <selelct> 标 签 元 素 定义 了 两 个 下 拉 列 表 框 ， 用 于 显示 提供 
给 用 户 进行 选择 的 年 份 (<selelct id="y"> ) 和 月 份 (<selelct id="m"> )。 
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第 019 行 代码 使 用 <table id="id-tb-date"> 标 签 元 素 定义 了 一 个 表格 ， 用 于 显示 通过 JavaScript 

脚本 动态 生成 的 日 历 。 

第 020 行 代码 使 用 <span id="id-span-info"> 标 签 元 素 定义 了 一 个 行内 容器 , 用 于 显示 用 户 通过 

单 击 所 选择 具体 日 期 的 提示 信息 。 

第 024 ~ 081 行 代码 定义 了 页 面 初 始 化 加 载 (onload ) 的 过 程 代码 。 其 中 ， 第 028 ~ 030 行 代 

码 和 第 033 ~ 035 行 代码 通过 使 用 for 循环 语句 初始 化 了 年 份 (2019 ~ 2020 ) 和 月 份 (1~ 12 )， 

用 户 可 以 通过 选择 具体 的 年 份 和 月 份 来 动态 创建 并 显示 表格 日 历 .第 037~ 080 行 代码 定义 了 

月 份 (<selelct id="m"> ) 下 拉 列 表 框 的 onchange 事件 处 理 方法 。 第 042 ~ 051 行 代码 用 于 委 

选 月 份 (大 月 、 小 月 和 头 月 ) 的 天 数 (31 天 、30 天 、28 天 或 29 天 )， 其 中 自 定义 isRunYear() 

方法 用 于 判断 关 年 ( 头 月 为 29 天 )。 第 052~ 057 行 代码 用 于 动态 生成 表格 日 历 的 星期 栏 ( 星 

期 日 ~ 星期六， 符合 西历 标准 )， 第 058 ~ 079 行 代码 用 于 动态 生成 具体 的 日 历 ， 其 中 第 067 

行 代码 和 第 070 行 代码 定义 了 <td> 标 签 元 素 的 单 击 onclick 事 处 理 方法 (showDay0 )， 当 用 户 

单 击 具 体 日 期 时 会 在 页 面 中 显示 关于 日 期 的 提示 信息 。 

第 085 ~ 100 行 代码 是 自 定义 showDay() 方 法 的 实现 过 程 ,该 方法 会 将 用 户 单 击 选择 的 日 期 ( 以 
“年 、 月 、 日 星期 几 ” 的 格式 ) 在 <span id="id-span-info"> 标 签 元 素 中 进行 显示 。 

第 101~107 行 代码 是 自 定义 setTbBgColor() 方 法 的 实现 过 程 ， 该 方法 会 突出 显示 表格 日 历 中 

用 户 单 击 选择 的 日 期 的 背景 色 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 8.13 所 示 。 


x | i 
CQ © localhost63342 加 合力 


国 ,avascript 全 入 实例 国 JavaScript 全 R= x 用 和 A 


员 | 关 


了 CG © localhost6334 中 回合 | » 


JavaScript 日 期 和 时 间 特 效 - 用 表格 制作 日 历 Javascript 日 期 和 时 间 特 效 - 用 表格 制作 日 历 


ti: [5 Th [Tv 
星期 日 | 星期 一 | 星期 二 | 星期 三 | 星期 四 | 星期 五 | 时 期 六 | 
1 2 3 4 5 

6 7 8 9 10 11 1 
13 14 15 16 17 18 19 


点 击 选择 日 历 : [2019 ~ 什 [1 ~ 上 月 
星期 日 | 星期 一 | 星期 二 | 星期 三 | 时 期 四 | 星期 五 | 星期 六 | 
1 3|4|5 
6|7|8|s\ iolmliz 
13|14|15|16\17 |18 1 

20 |21|22|23\24|25 
27 | 28 | 29 | 30 N31 


22 
27 | 28 | 29 | 30 | 31 


您 选择 的 日 期 是 : 2019 年 1 月 2 日. 旦 期 三 


图 8.13 ”JavaScript 实现 用 表格 制作 日 历 


如 图 8.13 中 箭头 所 示 ， 左 边 页 面 中 显示 了 表格 日 历 (2019 年 1 月 ) 动态 生成 后 的 效果 ， 右 边 


页 面 中 显示 了 用 户 选择 具体 日 期 (2019 年 1 月 2 日 ) 后 的 效果 。 


8.14 日 期 输入 框 


在 HTML 5 语法 中 ， 专 门 新 增 了 一 个 日 期 输入 框 控件 ， 使 用 <input type="date"> 标 签 就 可 以 实 
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现 。 那么, 之 前 HTML 版 本 中 的 日 期 输入 框 控件 是 如 何 实现 的 呢 ? 其 实 ， 基 于 8.13 节 中 实现 的 表 
格 日 历 ， 再 结合 使 用 文本 框 ， 同 样 可 以 通过 JavaScript 脚本 语言 动态 生成 日 期 输入 框 控件 。 下 面具 
体 介绍 一 个 通过 JavaScript 实现 日 期 输入 框 的 代码 实例 。 


【代码 8-14】( 详 见 源 代码 目录 ch08-js-date-input-calendar.html 文件 ) 


001 <!doctype html> 
002 <xhtml lang="en"> 


003 <head> 

004 <!-- 添加 文档 头 部 内 容 --> 

005 <title>JavaScript 全 程 实例 </title> 
006 </head> 

007 <body> 


008 <!-- 添加 文档 主体 内 容 --> 

009 <header> 

010 <nav>JavaScript 日 期 和 时 间 特 效 - 日 期 输入 框 </nav> 
011 </header> 

012 <!-- 添加 文档 主体 内 容 --> 


013 <div id="id-div-center" style=""> 


014 <p> 

015 日 期 输入 框 :<input type="text" id="id-input-date" 
onfocus="initDate (this.id);"/> 

016 </p> 

017 <div id="id-div-date" style=""> 

018 <p> 

019 <select id="y"></select> 年 

020 <select id="m" onchange="fillTbCalendar();"></select> 月 

021 </p> 

022 <table id="id-tb-date" border="1" align="center"></table> 

023 </div> 

024 </div> 


025 </body> 
026 <script type="text/javascript"> 


027 window.onload = function () { 

028 document .getElementById("id-input-date") .value = ""; 
029 fillSelCalendar () 7 

030 Ys 

031 function fillSelCalendar() { 

032 var y = document .getElementById('y'); 

033 var m = document .getElementById('m'); 

034 VA HEEY Ss rt 


035 for (let i = 2019; i <= 2020; i++) { 
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036 SErY ta <optlion Yaluesw RCR i </opEion>us 
037 } 
038 y.innerHTML = StrY7 
039 StrM sm JU 
040 Por CL Te lp Te 2 
041 strM += "<option value="' + j + ">' +j+ '</option>'; 
042 } 
043 m.innerHTML = strM; 
044 
045 function initDate(thisid) { 
046 document .getElementById (thisid) .value = ""; 
047 Var now = new Date(); 
048 Var YYYY = now.getFullYear(); 
049 var mm = now.getMonth() + 1; 
050 var dd = now.getDate(); 
051 Var week = now.getDay(); 
052 var arrWeek = ['HB', '—', ' 二 +,' 三 ', "由 ',，' 五 ',' 六 ']; 
053 var strWeek = ' 星 期 '; 
054 for (let i1= 0; i < 1 it+) 1{ 
055 if (i == week) { 
056 strWeek += arrWeek[i]; 
057 break; 
058 } 
059 } 
060 var strInfo = yyyy + ' 年 + mm + ' 月 + dd + ' 日 ' + strWeek; 
061 document .getElementById (thisid) .value = strInfo; 
062 var divDate = document .getElementById('id-div-date'); 
063 Var year = document .getElementById('y'); 
064 Var month = document .getElementById('m'); 
065 year.value = YYYY7 
066 month.value = mm; 
067 divDate.style.display = 'block'; 
068 fillTbCalendar (); 
069 } 
070 function fillTbCalendar(){ 
071 Var year = document .getElementById('y') .value; 
072 year = parselInt (year); 
073 Var month = ParseInt (document .getElementById('m') .value); 
074 var days = 31; 
075 if (isRunYear (Year) && month == 2) { 
076 days = 29; 
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077 
078 
079 
080 
081 
082 
083 
084 
085 
086 
087 
088 
089 
090 
091 
092 
093 
094 
095 
096 
097 
098 
099 
100 


101 
102 
103 


104 
105 
106 
107 
108 
09 
110 
计生 
计生 分 
3 
114 
| 
116 
117 


} else if (!isRunYear (Year) && month == 2) { 
days = 28; 
} else if (month == 4 
11 month == 6 
11 month == 9 
11 month == 11) { 
days = 30; 


} 
Varnarrweek = I 
var strW = '<tr>'; 
for (var w= 0; Ww < 7; wi+) ({ 
strW += '<td> 星 期 ' + arrWeek[w] + '</td>'; 
» 
strW += '</tr>'; 
var date = new Date(year, month - 1, 1); 
var week = date.getDay(); 
= 7) 


week = 0; 


if (week = 


var j= 17 
while (true) { 
strW += '<tr>'; 
for” (var ds = Or < Ti Lt 
A 
strW += '<td onclick="showDay (this,' + j + 


1 && i == week) { 


oe My ld 


j++; 
} else if (] > 1 && j <= days) { 


strW += '<td onclick="showDay (this,' +j+','+i+'"); 


"> + jj + '</td>'; 
Tr 
} else 
strW += '<td>gnbsp;</td>'; 
} 
strW += '</tr>'; 
if (j > days) 
break; 
} 
document .getElementById('id-tb-date') .innerHTML = strW; 
} 
function isRunYear(y) { 
return y % 4 == 0; 
} 
function showDay(lel, d, w) { 
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118 setTbBgColor (el); 
119 Var y = document .getElementById('y') .value; 
120 Var m = document .getElementById('"'m') .value; 
121 war rarrm = ee 1 六 ']7; 
122 var strW = ' 星 期 '; 
be or (let i = OF 1 < Ty iF) 
124 if (i == w) { 
125 strW += arrW[il]; 
126 break; 
127 } 
128 } 
129 var strInfo =y+ ' 年 +m+' 月 ' +d+' 日 ' + strWw; 
130 document .getElementById('id-input-date') .value = strIinfo; 
3 } 
32 function setTbBgColor (el) { 
3433 var tds = document .getElementsByTagName ("td"); 
134 for (let i = 0; i < tds.length; i++) { 
135 tds [i] .style.backgroundColor = ""; 
136 } 
E37 el.style.backgroundColor = "gray"; 
138 } 


139 </script> 
140 </html> 


关于 【代码 8-14】 的 说 明 : 


四 


【代码 8-14】〗 是 在 【代码 8-13】 的 基础 上 改进 而 成 的 ， 主 要 是 第 015 行 代码 增加 了 一 个 日 期 


输入 框 ， 用 于 显示 用 户 选 择 的 日 期 (初始 状态 为 当前 日 期 )。 


第 045 ~ 069 行 代码 实现 的 自 定义 initDate() 方 法 用 于 初始 化 日 期 输入 框 ， 日 期 输入 框 的 初始 


化 状态 为 当前 日 期 。 


第 070~ 113 行 代码 实现 的 自 定 义 fillTbCalendar() 方 法 用 于 初始 化 表格 日 历 ， 初 始 状态 为 当前 


日 期 的 月 份 日 历 。 


第 117~ 131 行 代码 实现 的 自 定义 showDay() 方 法 用 于 在 日 期 输入 框 中 显示 用 户 选择 的 日 期 ， 


日 期 格式 为 “YYYY 年 MM 月 DD 日 星期 W”。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 上 有 具体 效果 如 图 8.14 所 示 。 


如 图 8.14 中 箭头 所 示 ， 左 边 页 面 中 显示 了 初始 状态 〈 当 前 日 期 ) 的 日 期 输入 框 ， 右 边 页 面 中 


显示 了 用 户 选 择 (2019 年 1 月 8 日 星期 二 ) 的 日 期 输入 框 。 
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园 Javascript 全 得 实 出 x | 号 二 站 XX 国 ,evascript 全 和 @ 例 x I = "0 % 


CG © loclhost63342/js- 回合 » 三 © © localhost63342/js 加 合作 


Javascript 日 期 和 时 间 特 效 - 日 期 输入 框 JavaScript 日 期 和 时 间 特 效 - 日 期 输入 框 


日 期 输入 框 : [2019 年 1 月 3 日 旦 天 四 | 日 期 输入 框 [2019 年 1 月 8 日 星期 二 
| 
2019 ~ 第 [1 ~ 上 月 2019 ~ 证 [Lv 上 月 
星期 日 [星期 一 [星期 二 | 星期 三 | 星期 四 | 星期 五 | 星期 入 星期 日 | 星期 一 | 星期 三 [星期 四 | 星期 五 星期 六 | 
人 | 和 | | | 11|2|3|4|5 
| 9 | 10|1n|12 
19|14|115|16|17|18|19 139|14|115|16|17|1|19 
20 |21 |22|23 |24 |25 | 26 20 |21|22|23|24|25 | 26 
27 |28 |29|30|31| 27 |28|29|30|31 
| 


图 8.14 JavaScript 实现 日 期 输入 框 
8.15 显示 网 页 登录 时 间 


很 多 网 站 会 有 一 个 显示 用 户 登 录 页 面 时 间 的 功能 ， 基 本 原理 都 是 通过 设 定 计时 器 来 实现 的 。 
下 面 看 一 个 通过 JavaScript 实现 显示 网 页 登录 时 间 的 代码 实例 。 


( 详 见 源 代码 目 -date-login-time.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 

06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 日 期 和 时 间 特 效 - 显示 网 页 登录 时 间 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center" style=""> 

14 <span id="id-span-login-time"></span> 
Uo < /> 

16 </body> 

17 <script type="text/javascript"> 

18 var es 0 /Tn03 秒 

19 var m = 0; // TODO: 分 钟 
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20 var h = 0;// TODO: 小 时 

21 window.onload = function () { 

22 window.setInterval (function () { 

23 S++7 // TODO: 秒 +1 

24 if (s == 60) { // TODO: 如 果 秒 为 60 

25 s = 0; // TODO: 秒 置 零 

26 mm += 1; // TODO: 分 钟 +1 

27 } 

28 if (m == 60) { // TODO: 如 果 分 钟 为 60 

29 m = 0; // TODO: 分 钟 置 零 

30 h += 1; // TODO: 小 时 +1 

33 } 

32 var strLoginTime = "您 已 登录 , 累计 时 间 :" + h+" 时 "+m+ 
"分 "+st+" 秒 ."; 

33 document .getElementById('id-span-login-time') .innerText = 
strLoginTime; 

34 }, 1000); 

EE In 

36 </script> 

37 </html> 


关于 【代码 8-15】 的 说 明 : 

@ 第 18~20 行 代码 定义 了 一 组 变量 (s、m、h )， 分 别 用 于 表示 秒 、 分 钟 和 小 时 。 

@ 第 22~34 行 代码 通过 setInterval() 方 法 定义 了 一 个 计时 器 ， 时 间 间 隔 为 1000 毫秒 (1 秒 )。 在 
每 一 次 计时 器 定义 的 时 间 间 隔 (1 秒 ) 内 ， 对 秒 数 变量 (s ) 进行 一 次 累加 (+1 ) 操作 ; 而 当 
变量 (s ) 累加 到 60 (1 分 钟 ) 时 ， 对 分 钟 变量 (m ) 进行 一 次 累加 (+1 ) 操作 ; 而 当 变 量 (m) 
累加 到 60 (1 小 时 ) 时 ， 再 对 小 时 变量 (h) 进行 一 次 累加 (+1 ) 操作 。 按 照 这 个 方法 进行 
时 间 的 累加 ， 从 而 实现 对 用 户 登录 网 页 时 间 的 计时 功能 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 8.15 所 示 。 
园 ,avascript 全 程 实 便 X | 二 二 口 
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您 已 登录 累计 时 间 - 0 时 3 分 18 秒 


图 8.15 JavaScript 实现 显示 网 页 登录 时 间 
如 图 8.15 中 箭头 所 示 ， 页 面 中 显示 了 用 户 登 录 网 页 的 累计 时 间 (0 时 3 分 18 秒 ) 。 


第 9 章 网 页 特效 


本 章 介 绍 如 何 通过 JavaScript 来 实现 网 页 的 各 种 特效 ， 通 过 这 些 特 效 来 丰富 HTML 页 面 的 设 
计 手 段 和 展示 效果 。 


9.1 网 页 概述 


网 页 是 构成 网 站 的 主体 元 素 , 一 个 网 页 是 由 各 种 HTML 标签 和 各 类 资源 所 构成 的 超 文本 文件 。 

在 JavaScript 脚本 语言 中 ， 除 了 可 以 针对 各 种 页 面 元 素 进行 编程 设计 外 ， 还 可 以 针对 整体 网 页 
(浏览 器 特性 、 窗 口 属性 、 滚 动 条 控制 、 键 盘 鼠 标 控制 和 页 面 特 效 等 ) 进行 编程 设计 。 

JavaScript 网 页 特效 是 网 站 开发 中 很 重要 的 一 个 环节 ， 很 多 很 特殊 的 功能 都 是 通过 网 页 特效 来 
实现 的 。 本 章 将 为 读者 介绍 多 种 网 页 特效 的 代码 实例 。 


9.2 打开 新 页 面 


在 HTML 页 面 中 打开 新 页 面 可 以 使 用 很 多 种 方法 来 实现 ， 比 如 直接 使 用 超 链接 <a> 标 签 元 素 ， 
或 者 使 用 Window 对 象 的 open0 方 法 ， 又 或 者 直接 使 用 “javascript:open” 脚 本 语言 的 方式 。 在 本 节 
中 ， 我 们 就 详细 介绍 几 种 打开 新 页 面 的 代码 实例 。 


【代码 9-1】( 详 见 源 代码 目录 ch09-js-html-open.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 网 页 特效 - 打开 新 页 面 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-center" style=""> 
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14 <a href="open.html"> 打 开 新 页 面 </a> 
1 <a href="open.html" target=" blank" > 打开 新 页 面 (target=" blank")</a> 
16 <a onclick="window.open('open.html')"> 打 开 新 页 面 (window .open) </a> 
J <input type="button" value=" 打 开 一 个 新 的 窗口 (window .open)" 
18 onclick="window.open('open.html')"/> 
19 <input type="button" value=" 打 开 一 个 新 的 窗口 (function)" 
20 onclick="openNewHtml ('open.html')"/> 
2 <a href="javascript:openNewHtml ('open.html')"> 打 开 新 页 面 
(javascript:function)</a> 
22 </div> 
23 </body> 
24 <script type="text/javascript"> 
25 function openNewHtml (ur1l) { 
26 window.open (url); 
py } 
28 </script> 
29 </html> 


关于 【代码 9-1】 的 说 明 : 
@ 第 14 行 和 第 15 行 代码 分 别 通 过 <a> 标 签 元 素 定义 了 一 个 超 链接 ,href 属性 值 定义 了 一 个 新 的 


网 页 (hre 人 ="open.html" )。 这 两 行 代 码 均 可 以 打开 新 页 面 ， 但 区 别 是 第 15 行 代码 定义 的 <a> 
标签 元 素 增加 定义 了 一 个 target 属性 (target="_ blank" )， 表 示 新 页 面 将 会 在 新 窗口 中 打开 。 
具体 的 页 面 效果 如 图 9.1 和 图 9.2 所 示 。 
第 16 行 代码 通过 <a> 标 签 元 素 定义 了 一 个 超 链 接 ， 不 过 是 使 用 onclick 事件 方法 取代 了 href 
属性 ， 在 onclick 事件 方法 中 直接 调用 Window 对 象 的 open() 方 法 打开 新 页 面 ( 该 方法 默认 是 
在 新 窗口 中 打开 网 页 )。 
第 17~ 18 行 代码 和 第 19~ 20 行 代 码 分 别 通过 <input type="button"> 标 签 元 素 定义 了 一 个 按 
钮 ， 然 后 通过 onclick 事件 方法 实现 打开 新 页 面 的 操作 。 二 者 的 区 别 是 ， 第 20 行 代码 定义 的 
onclick 事件 方法 是 通过 调用 一 个 自 定义 openNewHtml() 方 法 来 实现 的 。 第 25 ~ 27 行 代码 是 
openNewHtml() 方 法 的 实现 过 程 ， 不 过 第 26 行 代码 仍旧 是 通过 调用 Window 对 象 的 open() 方 
法 实现 打开 新 页 面 的 。 
第 21 行 代码 定义 的 <a> 标 签 元 素 比 较 特殊 ， 在 href 属性 值 中 是 直接 通过 定义 JavaScript 脚本 
(javascript:openNewHtml() ) 的 方式 打开 新 页 面 的 ， 这 种 使 用 方式 虽 不 常用 ， 但 也 需要 读者 
理解 掌握 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 9.1 和 图 9.2 所 示 。 
如 图 9.1 中 箭头 和 标识 所 示 ， 在 使 用 第 14 行 代码 定义 的 超 链接 打开 新 页 面 时 ， 是 在 当前 窗口 


中 打开 的 。 


如 图 9.2 中 箭头 和 标识 所 示 ， 在 使 用 第 15 行 代码 定义 的 超 链接 打开 新 页 面 时 ， 是 在 新 窗口 中 


打开 的 。 
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rqet=” Nk) 
打开 新 页 面 (window.open) 


打开 一 个 新 的 窗口 (window.open) 


打开 一 个 新 的 窗口 (function) 


打开 新 页 面 (lavascriptfunction) 


9.1 JavaScript 实现 打开 新 页 面 (一 ) 
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JavaScript 全 程 实例 
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1/4/2019, 11:23:44 AM 

打开 新 页 面 (windowopen) 

打开 一 个 新 的 窗口 (window.open) 
打开 一 个 新 的 窗口 (function) 


打开 新 页 面 (iavascriptfunction) 


图 9.2 JavaScript 实现 打开 新 页 面 (二 ) 
9.3 ”打开 指定 大 小 的 窗口 


在 9.2 节 中 ， 我 们 初步 介绍 了 使 用 Window 对 象 的 open() 方 法 打开 新 窗口 。 其 实 ， 通 过 open0 


方法 还 可 以 自 定义 新 窗口 的 特性 , 最 常用 的 就 是 指定 新 窗口 的 大 小 尺寸 。 在 本 节 中 将 详细 介绍 一 个 
打开 指定 大 小 窗口 的 JavaScript 代码 实例 。 


【代码 9-2】( 详 见 源 代码 目录 ch09-js-html-open-size.html 文件 ) 


<!doctype html> 
<html lang="en"> 
03 <head> 


<!-- 添加 文档 头 部 内 容 --> 
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05 <title>JavaScript 全 程 实例 </title> 

06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 网 页 特效 - 打开 指定 大 小 的 窗口 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center" style=""> 


14 指定 新 窗口 大 小 : 


Width:<input type="text" id="id-window-width" value=""> 

16 Height:<input type="text" id="id-window-height" value=""> 

17 <input type="button" value=" 打 开 指 定 大 小 的 窗口 " 
onclick="openNewHtml ('open.html')"/> 

18 </div> 

19 </body> 

20 <script type="text/javascript"> 

pi function openNewHtml (url) { 

22 var w, h; 

23 Ww = document .getElementById('id-window-width') .value; 

24 if(w == 0) 

25 w= 100; 

26 h = document .getElementById('id-window-height') .value; 

2 if(h == 0) 

28 h = 100; 

29 window.open(url, '', 'width=' + w + ',height="' + h); 

30 } 

31 </script> 

32 </html> 


关于 【代码 9-2】 的 说 明 : 

@ 第 15 行 和 第 16 行 代码 通过 <input> 标 签 元 素 定义 了 一 组 文本 框 ， 用 于 接收 用 户 自 定 义 的 窗口 
大 小 尺寸 (宽度 和 高 度 )。 

@ 第 17 行 代码 通过 <input type="button"> 标 签 元 素 定义 了 一 个 按钮 ， 并 添加 了 单 击 onclick 事件 
处 理 方 法 (openNewHtml0 )， 用 于 打开 新 窗口 页 面 。 

@ 第 21~30 行 代码 是 openNewHtml() 方 法 的 实现 过 程 。 其中， 第 29 行 代码 使 用 Window 对 象 
的 open0 方 法 打开 指定 宽度 和 高 度 的 新 窗口 。 另外， 第 24~28 行 代码 的 作用 是 ， 如 果 用 户 未 
指定 新 窗口 的 宽度 和 高 度 ， 则 指定 默认 值 为 100。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 9.3 所 示 。 
如 图 9.3 中 的 箭头 所 示 ， 新 打开 的 窗口 尺寸 为 用 户 设 定 的 宽度 值 (300) 和 高 度 值 (150) 。 
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9.4 获取 打开 子 窗口 的 父 窗口 


在 9.3 节 中 , 我 们 介绍 了 如 何 打开 子 窗口 页 面 。 试想 一 下 , 如 果 网 站 中 的 父 窗口 和 子 窗口 很 多 、 
关系 比较 复杂 , 那么 如 何 厘清 窗口 之 间 的 父子 关系 呢 ?” 这 里 就 需要 用 到 Window 对 象 中 一 个 非常 有 
用 的 opener 属性 了 ， 该 属性 表示 创建 当前 子 窗口 的 Window 对 象 引 用 〔 乍 听 起 来 比较 描 口 ， 其 实 
就 是 指 的 父 窗口 ) 。 

在 本 节 中 ， 简 单 介绍 一 个 获取 打开 子 窗 口 的 父 窗口 的 JavaScript 代码 实例 。 这 里 ， 我 们 需要 创 
建 两 个 页 面 文件 ， 一 个 是 父 窗口 页 面 ， 另 一 个 是 子 窗口 页 面 。 首 先 ， 看 一 下 父 窗口 的 页 面 代码 。 


【代码 9-3】( 详 见 源 代码 目录 ch09-js-html-parenthtml 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 网 页 特效 - 获取 打开 子 窗口 的 父 窗口 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center" style=""> 

14 <input type="button"” value=" 打 开 子 窗口 "onclick="openNewWindow 
('ch09-js-html-sub.html')"/> 

1 <span id="id-span-parent"></span> 

16 </div> 
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17 </body> 

18 <script type="text/javascript"> 

19 function openNewWindow (url) { 

20 Var curUrl = window.location.href.split('?') [0]; 

芝 重 document .getElementById('id-span-parent') .innerHTML += 
"Current url: " + curUrl; 

2 Var subWin = window.open (url); 

23 var winUrl = subWin.opener.location.href.split('?')[0]; 

24 document .getElementById('id-span-parent') .innerHTML += 
"Return url: " + winUrl; 

25 |; 

26 </script> 

27 </html> 


关于 【代码 9-3】 的 说 明 : 


@ 第 14 行 代码 通过 <input> 标 签 元 素 定义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方法 
(openNewWindow() )， 用 于 打开 子 窗口 。 

@ 第 19~25 行 代码 是 openNewWindow() 方 法 的 实现 过 程 。 首先 ， 第 20 行 代 码 使 用 Location 对 象 
的 href 属性 获取 了 当前 页 面 ( 父 页 面 窗口 ) 地 址 。 然后 , 第 22 行 代 码 通过 Window 对 象 的 open 
方法 打开 了 新 页 面 ( 子 页 面 窗口 )， 该 方法 的 返回 值 保存 在 变量 (subWin ) 中 。 最 后 ， 第 23 行 
代码 通过 变量 (subWin ) 调用 opener 属性 ， 获 取 了 变量 (subWin ) 所 代表 窗口 的 地 址 。 


然后 ， 看 一 下 子 窗口 的 页 面 代码 。 


【代码 9-4】( 详 见 源 代码 目录 ch09-js-html-sub.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 网 页 特效 - 子 窗口 页 面 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center" style=""> 

14 <span id="id-span-sub"></span> 

5 </Lv 

16 </body> 

17 <script type="text/javascript"> 
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18 window.onload = function () { 
19 Var curUrl = window.location.href.split('?') [0]; 
20 document .getElementById('id-span-sub') .innerHTML += 

"Current urls " + curUrls 
深重 Var openerHref = window.opener.location.href.split('?') [0]; 
22 document .getElementById('id-span-sub') .innerHTML += 

"opener url: " + openerHref; 
23 }; 
24 </script> 
25 </html> 


关于 【代码 9-4】 的 说 明 : 


@ 第 19 行 代码 使 用 Location 对 象 的 href 属性 获取 了 当前 页 面 ( 子 页 面 窗口 ) 地 址 。 
@ 第 21 行 代码 通过 Window 对 象 的 opener 属性 ， 获 取 父 窗口 页 面 的 地 址 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 9.4 所 示 。 
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如 图 9.4 中 的 箭头 和 标识 所 示 ， 在 新 打开 的 子 窗口 中 ， 通 过 opener 属性 成 功 获取 了 父 窗口 的 
地 址 。 


9.5 ”父子 窗口 之 间 数 据 交互 


在 9.4 节 中 ， 我 们 初步 介绍 了 使 用 opener 属性 获取 父 窗口 地 址 的 方法 。 其 实 ， 通 过 opener 属 
性 还 可 以 实现 父 窗口 和 子 窗口 之 间 的 数据 交互 。 在 本 节 中 ， 介 绍 一 个 通过 JavaScript 实现 父子 窗口 
之 间 数 据 交互 的 代码 实例 。 


首先 ， 看 一 下 父 窗口 的 页 面 代码 。 


代码 目录 ch09-js-html-parent-sdata.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 网 页 特效 - 父 窗口 传递 数据 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <dqiv id="id-div-center" style=""> 

14 <label for="id-input-user"> 用 户 数据 : </label><input type="text" 
id="id-input-user"> 

<input value=" 打 开 子 窗口 " onclick="openSubWindow 

('ch09-js-html-sub-sdata.html')"/> 


16 <span id="id-span-parent"></span> 
17 </div> 

18 </body> 

19 <script type="text/javascript"> 

20 function openSubWindow (url) { 

21 Var subWin = window.open (url); 
22 } 


23° </script> 
24 </html> 


关于 【代码 9-5】 的 说 明 : 
@ 第 14 行 代码 通过 <input id="id-input-user"> 标 签 元 素 定义 了 一 个 文本 框 ， 用 户 可 以 输入 一 个 随 
意 数 据 。 该 文本 框 既 可 以 将 数据 传递 给 子 窗口 页 面 , 也 可 以 用 来 接收 来 自 子 窗口 页 面 的 数据 。 
@ 第 15 行 代码 通过 <input> 标 签 元 素 定义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方法 
(openSubWindow() )， 用 于 打开 子 窗口 。 
@ 第 20~22 行 代码 是 openSubWindow() 方 法 的 实现 过 程 。 其 中 ， 第 21 行 代 码 通过 Window 对 
象 的 open 方法 打开 了 新 页 面 ( 子 页 面 窗口 )。 


然后 ， 看 一 下 子 窗口 的 页 面 代码 。 


【代码 9-6】( 详 见 源 代码 目录 ch09-js-html-sub-sdata.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 网 页 特效 - 子 窗口 传递 数据 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-center" style=""> 


14 <span id="id-span-sub"></span> 
15 <label for="id-input-return"> 回 传 数据 :</label><input type="text" 
id="id-input-return"> 
16 <input type="button"” value=" 回 传 数据 " 
onclick="returnData('id-input-return')"/> 
17 </div> 
18 </body> 
19 <script type="text/javascript"> 
20 window.onload = function () { 
1 Var openerVal = window.opener.document .getElementById 
('id-input-user') .value; 
2 之 document .getElementById('id-span-sub') .innerHTML+= 
"opener value:"+topenerVal; 
乏 33 }; 
24 function returnData(id) { 


25 Var VReturnData = document .getElementById (id) .value; 
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26 window.opener.document .getElementById('id-input-user') . 
value = vReturnData; 

27 

28 </script> 

29 </html> 


关于 【代码 9-6】 的 说 明 : 


@ 第 21 行 代码 通过 Window 对 象 的 opener 属性 获取 了 父 窗口 页 面 中 文本 框 中 的 数据 ， 也 就 是 
【代码 9-5】 中 第 14 行 代码 定 义 的 文本 框 (<input id="id-input-user"> )。 
@ 第 15 行 代码 通过 <input id="id-input-return"> 标 签 元 素 定义 了 一 个 文本 框 ， 用 户 可 以 输入 一 个 
随意 数据 ， 该 数据 用 于 回 传 到 父 窗口 页 面 中 。 
@ 第 16 行 代码 通过 <input> 标 签 元 素 定义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方法 
(retumData() )， 用 于 执行 回 传 数据 的 操作 。 
@ 第 24~27 行 代码 是 retumData() 方 法 的 实现 过 程 。 其 中 ， 第 26 行 代码 通过 Window 对 象 的 
opener 属性 将 第 15 行 代 码 中 用 户 输入 的 数据 回 传 到 父 窗口 页 面 ， 也 就 是 回 传 到 【代码 9-5】 
中 第 14 行 代码 定义 的 文本 框 (<input id="id-input-user"> ) 中 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 9.5 所 示 。 


刀 Javas Xx 万 laasaip 十 - 口 x 蕊 Javascir | 总 lm x | 十 JE DO x 
CG © localhost6334 “区 鸭 | 三 CQ © localhost:63342 "区 为 | 三 
JavaScript 网 页 特效 - 父 窗口 传递 数据 JavaScript 网 页 特效 - 子 窗口 传递 数据 
填 入 用 户 数据 
用 户 数据 : 。 parent : “parent” opener value: parent: 
回 传 数据 : [ | 
回 传 数据 


初始 父 窗口 页 面 


鼠 Javas Xx 时 Javascip 十 一 口 x 怕 Javascoip | 时 Javasc x 十 


= 0 区 
CG © localhost63342 六 世人 为 | 三 © © localhost5334: EE» | 三 
JavaScript 网 页 特效 - 父 窗口 传递 数据 JavaScript 网 页 特效 - 子 窗口 传递 数据 
用 户 数据 : |return sub opener value: parent 填 入 用 户 数据 
EE Sm mA em st 
父 窗口 收 到 子 窗 


口 回 传 的 数据 


9.5 _ JavaScript 实现 父子 窗口 之 间 数 据 交互 


如 图 9.5 中 的 第 头 和 标识 所 示 ， 父 子 窗口 之 间 通 过 opener 属性 成 功 实现 了 数据 交互 的 操作 。 
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9.6 ”刷新 当前 页 面 


对 于 经 常 上 网 的 用 户 来 讲 ， 刷 新 浏览 器 页 面 是 一 项 必 不 可 少 的 操作 。 尤 其 是 在 页 面 变 慢 、 迟 
迟 无 法 响应 的 情况 下 ， 就 会 按 下 键盘 上 的 “F5” 键 进行 页 面 刷新 。 那 么 ， 通 过 JavaScript 脚本 语言 
如 何 实现 页 面 的 刷新 操作 呢 ? 在 HTML DOM 中 ，Location 对 象 中 定义 有 一 个 reload() 方 法 ， 用 于 
重新 加 载 当前 文档 。 在 本 节 中 ， 就 介绍 如 何 通过 JavaScript 实现 刷新 当前 页 面 的 代码 实例 。 


【代码 9-7】( 详 代码 目录 ch09-js-html-refresh.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 网 页 特效 - 刷新 当前 页 面 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-center" style=""> 


14 <input type="button" value=" 人 工 方式 刷新 页 面 " onclick="refreshManual () "/> 
15 <input type="button" value=" 自 动 刷新 页 面 " onclick="refreshAuto()"/> 
16 </div> 

17 </body> 

18 <script type="text/javascript"> 

19 function refreshManual() { 

20 var 1og = "manual refresh log : "7 

电 window.location.reload(); 

22 Var mdate = new Date(); 

23 log += mdate.toLocaleString(); 

24 console.log (log); 

2 } 

26 // TODO: define timer variables 

Ty Var timer = null; 

28 function refreshAuto() { 

29 Var log = "init log : "; 


30 var pdate = new Date(); 
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31 log += pdate.toLocaleString() + "\n"™; 

D2 console.log (log); 

33 timer = self.setTimeout (function () { // TODO: setTimeout 
34 window.location.reload(); 

3 var adate = new Date(); 

36 log += "auto refresh log : " + adate.toLocaleString() + "\n"; 
37. console.1log (lo0g); 

38 clearTimeout (timer) 7 

39 }, 3000); 

40 } 

41 </script> 

42 </html> 


关于 【代码 9-7】 的 说 明 : 

@ 第 14 行 和 第 15 行 代码 通过 <input type="button"> 标 签 元素 定 义 了 两 个 按钮 ,分 别 用 于 实现 “人 
工 方式 刷新 页 面 ” 和 模拟 “自动 刷新 页 面 ” 的 两 种 操作 方式 。 

@ 第 19~25 行 代码 是 refreshManual() 方 法 的 实现 过 程 , 用 于 实现 “人 工 方式 刷新 页 面 ” 的 操作 。 
在 第 21 行 代码 中 ， 通 过 调用 Location 对 象 的 relaod() 方 法 来 实现 重新 加 载 文档 (等 于 刷新 当 
前 页 面 )。 

8 第 28~40 行 代码 是 refreshAuto() 方 法 的 实现 过 程 ， 用 于 实现 模拟 “自动 刷新 页 面 ”的 操作 。 
其 中 ， 第 33 ~39 行 代 码 通过 使 用 setTimeout() 方 法 设 定 了 一 个 时 间 延 迟 (3s )， 然 后 通过 调用 
Location 对 象 的 relaod() 方 法 来 实现 刷新 当前 页 面 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 9.6 和 图 9.7 所 示 。 
| | 部 JavaScript 全 查实 例 x 蒜 = 


© © localhost63342/ “加 健全 


A 


JavaScript 网 页 特效 - 刷新 当前 页 面 


人 工 方式 刷新 页 面 自动 刷新 页 面 


v 


芭 和 Inspector 园 |Console DD Debugger » 器:…x 

会 时 Filteroutput [DPersist Logs 
manual refresh log : 1/9/2819, che9-js-html-refreshhtml:51;9 
4:39:59 PM 


9.6 JavaScript 实现 刷新 当前 页 面 (人 工 方式 ) 


如 图 9.6 中 箭头 所 示 ， 在 单 击 “ 人 工 方式 刷新 页 面 ”按钮 后 ， 浏 览 器 控制 台中 显示 了 相应 的 
信息 。 

如 图 9.7 中 箭头 的 标识 所 示 ， 在 单 击 “ 自 动 刷 新 页 面 ”按钮 后 ， 浏 览 器 控制 台中 分 别 显示 了 自 
动 刷新 前 和 自动 刷新 后 的 两 行 信息 。 


铭 Javascript 全 程 详 例 


x We 生生 


y GC © localhost63342/js-tota 回 安 » 三 


JavaScript 网 页 特效 - 刷新 当前 页 面 


人 工 方式 刷新 页 面 。 。 自动 刷新 页 面 于 
区 疡 Inspector 回 Console DDebugght » 加 … x 
会 时 Fikeroutput 


init log : 1/9/2619，4:42:38 PN 
auto refresh log : 1/9/2019, 4:42:41 PM 


»| 


图 9.7 JavaScript 实现 刷新 当前 页 面 〈 模 拟 自动 ) 


DPersist Logs 
che9-js-html-refresh.html:70:13 


9.7 屏蔽 鼠标 右键 


在 某 些 需要 保护 网 页 内 容 的 网 站 中 ， 通 常 是 屏蔽 掉 鼠 标 右键 的 ， 也 就 是 由 用 户 尝 试点 击 鼠 标 
右键 的 操作 是 无 效 的 。 在 本 节 中 ， 介 绍 一 个 如 何 通过 JavaScript 实现 屏蔽 鼠标 右键 的 代码 实例 。 


【代码 9-8】( 详 见 源 代码 目录 ch09-js-html-forbidden-rightmouse.html 文件 ) 


01 <script type="text/javascript"> 


02 document .onmousedown = function (e) { 

03 // TODO: 判断 事件 的 值 是 否 为 鼠标 右键 

04 if (e.button == 2) { 

05 alert (' 禁 用 鼠标 右键 1'); ”// TODO: 提示 用 户 禁 用 鼠标 右键 
06 

07 } 


08 </script> 


关于 【代码 9-8】 的 说 明 : 


@ 第 02~07 行 代码 定义 了 监听 Document 对 象 中 鼠标 点 击 onmousedown 事件 的 方法 函数 .其 中 ， 
第 04~ 06 行 代码 通 过 判断 Event 对 象 的 button 属性 值 是 否 为 2 ( 指 代 鼠 标 右键 ) 来 实现 屏蔽 
筷 标 右键 的 操作 。 


9.8 屏蔽 上 下 文 菜单 


除了 屏蔽 鼠标 右键 操作 ， 还 有 一 个 屏蔽 上 下 文 菜单 的 操作 ， 二 者 在 效果 上 是 差不多 的 。 对 于 
屏蔽 上 下 文 菜单 的 操作 ， 我 们 可 以 通过 监听 oncontextmenu 事件 来 实现 。 在 本 节 中 ， 将 介绍 一 个 如 
何 通过 JavaScript 实现 屏蔽 上 下 文 菜单 的 代码 实例 。 
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【代码 9-9】( 详 见 源 代码 目录 ch09-js-html-forbidden-contextmenu.html 文件 ) 


01 <script type="text/javascript"> 


02 document .oncontextmenu = function (e) { 
03 e.returnValue = false; 
04 Fn 


05 </script> 


关于 【代码 9-9】 的 说 明 : 


@ 第 02~04 行 代码 定义 了 监听 Document 对 象 中 上 下 文 菜单 oncontextmenu 事件 的 方法 函数 。 
其 中 ， 第 03 行 代码 通过 设 定 Event 对 象 的 retumValue 属性 值 为 否 ( false ) 来 实现 屏蔽 上 下 文 
菜单 的 操作 。 


9.9 屏蔽 复制 功能 


本 节 将 实现 如 何 屏 蔽 网 页 中 的 复制 功能 。 对 于 屏蔽 网 页 中 的 复制 操作 ， 可 以 通过 监听 oncopy 
事件 来 实现 。 在 本 节 中 ， 将 介绍 一 个 如 何 通过 JavaScript 实现 屏蔽 网 页 复制 功能 的 代码 实例 。 


【代码 9-10】( 详 见 源 代码 目录 ch09-js-html-forbidden-copy.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 


07 <body oncopy="alert (' 禁 止 复制 网 页 内 容 !') ;return false;"> 
08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 网 页 特效 - 禁止 复制 </nav> 

11 </header> 

12 </body> 

13 </html> 


关于 【代码 9-10】 的 说 明 : 


”禁止 网 页 复制 的 关键 代码 在 第 07 行 的 <body> 标 签 元 素 中 ， 通 过 为 oncopy 事件 方法 定义 返回 
值 false 来 实现 禁止 复制 内 容 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 9.8 所 示 。 


图 9.8 JavaScript 实现 屏蔽 复制 功能 
如 图 9.8 中 箭头 所 示 ， 在 选择 页 面 内 容 并 右 击 后 ， 选 择 复制 (copy) 命令 后 ， 页 面 中 弹出 了 警 
告 提示 框 “ 禁 止 复 制 网 页 内 容 ! ”。 那 么 ， 刚 刚 的 复制 操作 到 底 成 功 没有 呢 ? 我 们 可 以 通过 “ 剪 切 
板 ”来 查看 ， 有 具体 效果 如 图 9.9 所 示 。 


ClipboardX = 口 x 


ltems 0 


W22019 104452 AM oncopy="alert( 禁 止 复制 网 页 内 容 !);return false;” 
TEXT, RIF 

41 Bytes 

DESKTOP-O6U2936 

201901121044522ml 


上 面 是 Windows10 竟 贴 板 中 的 内 容 。 
可 以 看 到 其 中 仍 是 之 前 复制 的 代码 ， 刚 
刚 涯 试 复制 的 网 页 内 容 并 没有 被 复制 。 


图 9.9 通过 “剪贴 板 ” 查 看 复制 的 内 容 


如 图 9.9 中 标识 所 示 ， 刚 刚 尝 试 复制 的 网 页 内 容 并 没有 成 功 ，“ 剪 切 板 ”中 的 最 近 内 容 仍 为 之 
前 复制 的 JavaScript 代码 。 


某 些 Windows 10 版 本 的 系统 中 没有 提供 剪贴 板 应 用 ( 带 可 视 化 窗口 ) ,读者 需要 自行 


加 下载 第 三 方 的 免费 应 用 。 
提 示 


9.10 ”屏蔽 选择 操作 


屏蔽 网 页 中 的 复制 功能 ， 看 起 来 似乎 有 点 烦琐 。 其 实 ,通过 JavaScript 脚本 语言 可 以 直接 屏蔽 
网 页 中 的 选择 操作 (通过 拖 动 鼠标 选择 ) 。 无 法 选择 ， 也 就 无 法 复制 了 。 在 网 页 中 屏蔽 选择 操作 ， 
可 以 通过 监听 onselectstart 事件 来 实现 。 在 本 节 中 ， 将 介绍 一 个 如 何 通过 JavaScript 实现 屏蔽 网 页 
选择 操作 的 代码 实例 。 
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【代码 9-11】( 详 见 源 代码 目录 ch09-js-html-forbidden-select html 文件 ) 


01 <script type="text/javascript"> 


02 document .onselectstart = function (e) { 
03 e.returnValue = false; 
04 Fn 


05 </script> 


关于 【代码 9-11】 的 说 明 : 


@ 第 02~04 行 代码 定义 了 监听 Document 对 象 中 开始 选择 onselectstart 事件 的 方法 函数 。 
@ 第 03 行 代 码 通过 设 定 Event 对 象 的 returnValue 属性 值 为 否 (false ) 来 实现 屏蔽 选择 的 操作 。 


如 果 在 网 页 中 屏蔽 了 选择 操作 ， 即 使 用 户 通过 拖 动 鼠标 进行 选择 ， 最 终 也 是 无 法 选取 任何 文 
本 内 容 的 。 


9.11 ”防止 网 页 被 “frame” 


总 有 一 些 无 良 的 设计 人 员 ， 喜 欢 直 接 嵌 套 (“frame”) 他 人 的 页 面 到 自己 的 网 站 中 。 而 且 ， 
这 样 做 的 成 本 是 非常 低 的 ， 直 接 通 过 <iframe> 框 架 引 用 目标 网 址 就 可 以 实现 。 为 了 防止 自己 的 页 面 
被 别人 “frame”， 可 以 在 页 面 中 嵌入 一 段 JavaScript 脚本 ， 用 于 检测 当前 页 面 是 不 是 顶层 (top) 
窗口 ， 假 如 检测 出 不 是 顶层 (top) 窗口， 就 通过 脚本 语言 修改 过 来 。 这 样 ， 当 别人 “frame” 你 的 
网 页 时 ， 就 会 自动 转向 你 的 网 页 了 ， 而 不 是 被 对 方 “frame” 到 他 们 的 网 页 中 。 

在 本 节 中 ， 将 介绍 一 个 如 何 通过 JavaScript 实现 屏蔽 网 页 选择 操作 的 代码 实例 。 


【代码 9-12】( 详 见 源 代码 目录 ch09-js-html-forbidden-frame.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 网 页 特效 - 防止 网 页 被 “frame”</nav> 
11 </header> 

12 </body> 

13 <script type="text/javascript"> 

14 window.onload = function () { 


LD // TODO: 判断 有 没有 frame 


16 if (top.location != self.location) { 
7 alert ("网 页 被 “frame” 了 !"); 

18 top.location = self.location; 

19 } else { 

20 console.1og ("网 页 未 被 “frame”!"); 
史 旨 } 

22 }; 

23 </script> 

24 </html> 


关于 【代码 9-12】 的 说 明 : 

@ 第 16~21 行 代码 通过 让 条 件 语 句 判 断 当 前 窗口 对 象 (self) 是 否 为 顶层 窗口 (top ) 框架 。 如 
果 判 断 结果 为 tue， 就 表示 当前 窗口 未 被 “frame”; 如 果 判 断 结 果 为 false， 就 表示 当前 窗口 
已 经 被 “frame” 了 ， 此 时 可 通过 第 18 行 代码 将 当前 窗口 跳出 到 顶层 窗口 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 9.10 所 示 。 
辆 ,avascript 全 Ex 人 x | 十 一 口 
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从 时 Fiteroutput Persist Logs 
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»| 
图 9.10 JavaScript 实现 防止 网 页 被 “frame” (一 ) 


如 图 9.10 中 箭头 所 示 ， 浏 览 器 控制 台中 提示 “网 页 未 被 “frame”” 信 息 。 网 页 被 “frame” 
又 是 什么 效果 呢 ? 下 面 看 一 个 网 页 被 “frame” 后 通过 JavaScript 跳出 “frame” 的 代码 实例 。 


【代码 9-13】( 详 见 源 代码 目录 ch09-js-html-forbidden-frame-test.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 
09 <header> 
10 <nav>JavaScript 网 页 特效 - 防止 网 页 被 “frame” 测 试 </nav> 
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11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center" style=""> 

14 <iframe src="ch09-js-html-forbidden-frame.html"></iframe> 
15 </div> 

16 </body> 

17 </html> 


关于 【代码 9-13】 的 说 明 : 

8 第 14 行 代码 通过 <iframe src="ch09-js-html-forbidden-frame.html"> 标 签 元 素 将 【代码 9-12】 定 
义 的 HTML 页 面 “frame” 进 来 了 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 9.11 所 示 。 
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ch09-js-html-forbidden-frame.html 


图 9.11 JavaScript 实现 防止 网 页 被 “frame” (二 》 


如 图 9.11 中 箭头 和 标识 所 示 ， 左 边 页 面 中 显示 了 “网 页 被 “frame” 了 ! ”的 警告 弹出 框 。 在 
将 警告 弹出 框 关闭 后 ， 右 边 页 面 显 示 网 页 被 “frame” 了 的 效果 。 我 们 知道 ， 【代码 9-12】 中 定义 
的 第 18 行 代码 防止 了 页 面 (ch09-js-html-forbidden-frame.html) 被 “frame”。 因 此 。 图 9.11 中 右 
边 的 页 面 很 快 会 跳出 并 变 成 被 “frame” 的 页 面 ， 如 图 9.12 所 示 。 
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图 9.12” JavaScript 实现 防止 网 页 被 “frame” (三 ) 


9.12 ”隐藏 页 面 滚动 条 


在 默认 情况 下 ， 当 页 面 中 的 内 容 超过 窗口 边界 时 ， 会 自动 显示 出 滚动 条 〈 横 向 和 竖 向 ) 的 效 
果 。 但 是 ， 一 般 设 计 人 员 是 不 希望 页 面 出 现 滚动 条 的 〈 尤 其 是 横向 滚动 条 ) ， 这 时 就 需要 将 滚动 条 
隐藏 掉 。CSS 层 县 样式 表 中 提供 了 一 个 overflow 属性 ， 用 于 设置 当 内 容 溢出 元 素 边 界 时 如 何 处 理 。 
在 本 节 中 ， 将 介绍 一 个 如 何 通过 JavaScript 操作 overflow 属性 来 实现 隐藏 页 面 滚动 条 的 代码 实例 。 


【代码 9-14】( 详 见 源 代码 目录 ch09-js-html-hidden-scrollbar.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 
09 <header> 
10 <nav>JavaScript 网 页 特效 - 隐藏 页 面 滚动 条 </nav> 
11 </header> 
12 <!-- 添加 文档 主体 内 容 --> 
13 <div id="id-div-center" style=""> 
14 <span> 隐 藏 页 面 滚动 条 </span> 
15 <input type="radio" id="id-scrollbar-1" value="1" 
onclick="sbCheck (this.id) "> 允许 页 面 滚动 条 
16 <input type="radio" id="id-scrollbar-0" value="0" 
onclick="sbCheck (this .id) "> 隐藏 页 面 滚 动 条 


17 </div> 

18 </body> 

19 <script type="text/javascript"> 

20 window.onload = function(){ 

21 document .getElementById('id-scrollbar-1') .checked = true; 
这 }; 

Ee function on scrollbar check(thisid) { 

24 var C = document .getElementById (thisid) .value; 
25 Switch(c) { 

26 case "0": 

27 // ToDO: 隐藏 且 禁 用 横向 纵向 两 个 滚动 条 

28 document .body.style.overflow = "hidden"; 
2 break; 

30 Case "1": 


31 // TODO: 开启 横向 纵向 两 个 滚动 条 
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3 document .body.style.overflow = "auto"; 
33 break; 

34 } 

5 | 

36 </script> 

37 </html> 


关于 【代码 9-14】 的 说 明 : 

@ 第 15~16 行 代码 通过 <inputtype="radio"> 标 签 元 素 定义 了 一 组 (两 个 ) 单 选 按钮 ， 并 添加 了 
单 击 onclick 事件 方法 (sbCheck() )， 分 别 用 于 执行 选择 显示 或 隐藏 页 面 滚动 条 的 操作 。 

@ 第 23~35 行 代码 是 单 击 onclick 事件 方法 (sbCheck() ) 的 实现 过 程 。 其 中 ， 第 28 行 和 第 32 
行 代码 分 别 根据 用 户 的 选择 , 通过 设 定 overflow 属性 值 实现 显示 ("auto" ) 或 隐藏 ("hidden" ) 
滚动 条 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 9.13 所 示 。 
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Javascript 网 页 特效 - 隐藏 页 面 滚动 


图 9.13 JavaScript 实现 隐藏 页 面 滚动 条 


如 图 9.13 中 箭头 所 示 ， 左 边 页 面 中 是 默认 显示 滚动 条 的 效果 ， 右 边 页 面 中 是 隐藏 滚动 条 的 效 
果 。 另 外 ， 用 户 在 左边 页 面 是 可 以 通过 鼠标 操作 滚动 条 的 ， 而 在 右边 页 面 是 无 法 进行 滚动 的 。 


9.13 ”最 小 化 、 最 大 化 和 关闭 窗口 


在 某 些 情况 下 ， 需 要 将 新 打开 的 窗口 以 最 小 化 或 最 大 化 的 方式 显示 出 来 。HTML DOM 中 提供 
了 一 个 resizeTo() 方 法 ， 可 以 按照 指定 的 窗口 尺寸 进行 调整 。 另 外 ， 如 果 需 要 关闭 窗口 ， 可 以 通过 
close() 方 法 来 实现 。 

下 面 介绍 一 个 如 何 通 过 JavaScript 实现 以 最 小 化 和 最 大 化 方式 打开 窗口 以 及 关闭 窗口 操作 的 
代码 实例 。 


详 见 源 代码 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
计时 
12 
3 
14 
15 
16 
17 
18 
9 
20 
El 
22 


23 
24 
25 
26 
27 
28 


29 
30 
3 
3 
33 
34 
35 
36 
号 
38 
SS 


<!doctype html> 
<html lang="en"> 
<head> 


<!-- 添加 文档 头 部 内 容 --> 
<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 网 页 特效 - 最 小 化 、 最 大 化 和 关闭 窗口 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 


<div id="id-div-center" style=""> 
<input type="button" value=" 最 小 化 窗口 " onclick="window min()"/><br><br> 
<input type="button" value=" 最 大 化 窗口 " onclick="window max()"/><br><br> 
<input type="button" value=" 关 闭 窗口 " onclick="window_close()" /><br><br> 
</div> 
</body> 
<script type="text/javascript"> 
var win; // TODO: define global window obj 
function window min() { 
win = window.open("open.html", "", " blank","width=350, 
height=300"); 
win.focus(); 
var w= 1,h=1; 
win.resizeTo(w, h); 
} 
function window max() { 
win = window.open("open.html", "", " blank", "width=350, 
height=300") 7 
win.focus () 7 
var w= 0, h= 0; 
Ww = window.screen.availWidth; 
h = window.screen.availHeight; 
win.moveTo(0, 0); 
win.resizeTo(w, h); 
上 
function window close() { 
win.focus () 7 


win.close() 7 
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40 </script> 
41 </html> 


关于 【代码 9-15】 的 说 明 : 

”第 20 行 代码 定义 了 一 个 全 局 变量 ( win )， 用 于 保存 通过 window.open() 方 法 打开 的 窗口 对 象 。 

@ 第 21~26 行 代码 定义 的 单 击 onclick 事件 方法 (window_min() ) 用 于 实现 以 最 小 化 的 方式 打 
开 窗 口 的 操作 。 其 中 ， 第 22 行 代码 通过 window.open() 方 法 打开 本 地 open.html 页 面 ， 并 定义 
了 窗口 的 打开 方式 ("_blank" ) 和 初始 化 尺寸 ("width=350,height=300" ); 第 24 行 代码 定义 了 
最 小 化 窗口 的 尺寸 (w=1l,h=1) 第 25 行 代码 通过 调用 resizeTo() 方 法 以 最 小 化 方式 重新 调整 
新 打开 的 open.html 页 面 。 

@ 第 27~35 行 代码 定义 的 单 击 onclick 事件 方法 (window_max() ) 用 于 实现 以 最 大 化 的 方式 打 
开 窗 口 的 操作 。 其 中 ,第 28 行 代 码 通过 window.open() 方 法 打开 本 地 open.html 页 面 ( 同 第 22 
行 代码 ); 第 31 行 和 第 32 行 代码 通过 Screen 对 象 的 availWidth 属性 和 availHeight 属性 获取 
了 设备 屏幕 的 可 用 尺寸 ; 第 33 行 代码 通过 调用 moveTo() 方 法 将 open.html 页 面 窗口 移动 到 屏 
幕 原点 (0，0); 第 34 行 代码 通过 调用 resizeTo() 方 法 以 最 大 化 ( 屏幕 可 用 尺寸 ) 方式 重新 调 
整 该 窗口 尺寸 。 

@ 第 36~39 行 代码 定义 的 单 击 onclick 事件 方法 (window_close() ) 用 于 实现 关闭 窗口 的 操作 ， 
主要 是 通过 第 38 行 代码 调用 的 close() 方 法 来 实现 的 。 


9.14 ”脚本 永 不 出 错 


如 果 加 入 HTML 页 面 中 的 JavaScript 脚本 存在 错误 ， 那 么 在 页 面 打开 运行 过 程 中 可 能 会 出 现 
用 户 并 不 希望 看 到 的 提示 脚本 错误 的 弹出 对 话 框 ， 这 是 一 种 不 太 友好 的 JavaScript 语言 设计 方式 。 
为 避免 这 种 情况 ， 可 以 在 网 页 中 通过 使 用 onerror 事件 方法 来 添加 捕获 错误 的 代码 ， 理 想 情 况 下 是 
可 以 让 JavaScript 脚本 永 不 出 错 。 下 面 ， 我 们 就 介绍 一 个 如 何 通过 JavaScript 实现 脚本 永 不 出 错 的 
代码 实例 。 


【代码 9-16】( 详 见 源 代 码 目录 ch09-js-html-onerror.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 
09 <header> 
10 <nav>JavaScript 网 页 特效 - 脚本 永 不 出 错 </nav> 
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</header> 
<!-- 添加 文档 主体 内 容 --> 


<div id="id-div-center" style=""> 
<input type="button" id="id-input-error" value=" 测 试 错误 捕获 " 
onclick="testErr();"/> 
</div> 
</body> 


<script type="text/javascript"> 
window.onload = function (ev) { 
window.onerror = function (msg, url, line) { 
console.log (msg); 
console.log (url); 
console.log(line); 
// TODO: 屏蔽 脚本 错误 提示 
return 七 rue7 
} 
}; 
function testErr() { 
aaalert ("测试 错误 捕获 ") ; 
. 
</script> 
</html> 


关于 【代码 9-16】 的 说 明 : 


@ 第 14 行 代码 通过 <input> 标 签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方法 


(testErr() )。 


@ 第 27~29 行 代码 是 单 击 onclick 事件 方法 (testErr() ) 的 实现 过 程 。 其 中 ， 第 28 行 代码 定义 


了 弹出 警告 框 ， 但 是 alert() 方 法 名 写 错 了 (写成 aaalert) 了 )， 目 的 就 是 人 为 制造 出 一 个 脚本 
错误 ， 用 于 测试 错误 捕获 。 


@ 关键 代码 是 第 19 ~25 行 定义 的 错误 捕获 onerror 事件 方法 ， 该 方法 中 的 三 个 参数 分 别 表示 错 


误 信 息 (msg )、 错 误 地 址 (url ) 和 错误 代码 行 数 (line )。 第 24 行 代码 定义 的 返回 值 (true ) 
是 屏蔽 脚本 错误 提示 的 关键 。 下 面 我 们 将 分 别 测试 一 下 有 无 定义 该 行 代码 的 不 同 结果 。 


使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 (这 里 先 注 释 掉 第 24 行 代码 ), 具体 效果 如 图 9.14 


所 示 。 


如 图 9.14 中 箭头 所 示 ， 浏 览 器 控制 台中 分 别 显示 了 错误 信息 、 错 误 地 址 和 错误 代码 行 数 ， 并 


以 显著 的 方式 给 出 了 错误 提示 。 


下 面 继续 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 (这 里 恢复 第 24 行 代码 ) ， 有 具体 效果 如 


图 9.15 所 示 。 


如 图 9.15 中 所 示 ， 浏 览 器 控制 台中 分 别 显示 了 错误 信息 、 错 误 地 址 和 错误 代码 行 数 ， 但 并 没 


有 给 出 如 图 9.14 中 的 错误 提示 ， 说 明 脚 本 错误 提示 被 屏蔽 掉 了 。 
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民 侣 Inspector 回 Console DDebugger {} styleEditor » 个 … x 
会 时 Filteroutput 口 Persist Logs 
ReferenceError: aaalert is not defined che9-js-html-onerror.html:51;13 
http://Localhost:63342/js-total -somples cheg-js-html-onerror.html:52:13 


/ches/ches-js-html- 
onerror.html?_ ijt=sLhgastva71vv2i8j7vLv16009 


63 ches-js-html-onerror.html:53:13 


@ ReferenceError: aaalert is not defined [Learn che9-js-html-onerror.html:63:9 
More] 


图 9.14 JavaScript 实现 脚本 永 不 出 错 (一 ) 
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芭 侣 Inspector 回 Console DD Debugger 为 后 … x 


会 时 Filteroutput 口 persist Logs 
ReferenceError: aaalert is not defined ches-js-html-onerror.html:51:13 


http://LocaLhost:63342/js-total -somples ches-js-html-onerror.html:52:13 
/ches/che9-js-html - 


‘onerror.htmL? ijt=5Lh9astvo71vv2i8j7vLv16009 
63 ches-js-html-onerror.html:53:13 


图 9.15 ”JavaScript 实现 脚本 永 不 出 错 (二 ) 
9.15 ”获取 浏览 器 信息 


各 大 主流 浏览 器 的 开发 商 在 设计 浏览 器 时 均 会 提供 关于 浏览 器 内 核 、 类 型 、 代 码 名 称 、 版 本 
号 、 语 言 等 方面 的 信息 。 如 果 想 获取 这 些 信息 ， 通 过 使 用 Navigator 对 象 就 可 以 实现 。 下 面 ， 我 们 
介绍 一 个 如 何 通 过 JavaScript 实现 获取 浏览 器 信息 的 代码 实例 。 
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【代码 9-17】( 详 见 源 代 |-get-browser-info.html 文件 ) 


01 <!doctype html> 
02 <htm1l lang="en"> 


03 <head> 
04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 网 页 特效 - 获取 浏览 器 信息 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-center" style=""> 


14 <span id="id-span-browser-info"></span> 

15 </div> 

16 </body> 

17 <script type="text/javascript"> 

18 window.onload = function () { 

9 var browser info = "<b> 浏 览 器 主要 信息 :</b>" + "<br>"; 

20 browser_info += "浏览 器 代码 名 称 : " + navigator.appCodeName + "<br>"; 

2 browser_info += "浏览 器 类 型 : " + navigator.appName + "<br>"; 

22 browser_info += "浏览 器 内 核 : " + navigator.userAgent + "<br>"; 

23 browser info += "浏览 器 版 本 : " + navigator.appVersion + "<br>"; 

24 browser_info += "浏览 器 语言 : " + navigator.language + "<br><br>"; 

25 browser_info += "<b> 浏 览 器 全 部 信息 :</b>" + "<br>"; 

26 for (var n in navigator) { 

2 if (typeof navigator[n] == "string") 

28 browser info +=n+" ; "+ navigator[n] + "<br>"; 

29 

30 document .getElementById("id-span-browser-info") .innerHTML = 
browser info; 

31 }; 

32 </script> 

33 </html> 


关于 【代码 9-17】 的 说 明 : 
ee 第 20 ~24 行 代码 通过 Navigator 对 象 的 一 组 重要 属性 ， 分 别 获 取 浏 览 器 代码 名 称 
(appCodeName )、 浏览 器 类 型 (appName )、 浏 览 器 内 核 (userAgent)、 浏览 器 版 本 (appVersion ) 
和 浏览 器 语言 (language ) 这 几 个 主要 信息 。 
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@ 第 26~29 行 代码 通过 for 循环 迭代 语句 ， 遍 历 了 Navigator 对 象 中 全 部 字符 类 型 的 属性 ， 相 
当 于 获取 了 关于 浏览 器 的 全 部 重要 信息 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 9.16 所 示 。 

如 图 9.16 中 箭头 所 示 ，userAgent 属性 中 包含 了 关于 浏览 器 内 核 的 重要 信息 ， 因 此 设计 人 员 在 
编写 浏览 器 兼容 性 测试 代码 时 主要 就 是 依据 userAgent 属性 。 

这 里 需要 读者 特别 注意 的 是 ，Navigator 对 象 是 属于 HTML BOM (浏览 器 对 象 模型 ) 范畴 的 。 
我 们 都 知道 BOM 并 不 是 正式 的 W3C 标准 , 因此 获取 的 浏览 器 信息 均 是 浏览 器 开发 商 自 己 定义 的 ， 
并 不 是 标准 化 信息 。 
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: Netscape 

浏览 器 内 核 : Mozilla/5.0 (Windows NT 10.0; rw65.0) Gecko/20100101 Firefox/65.0 
浏览 版 本 : 5.0 (Windows) 

浏览 器 语言 : en-US 


浏览 器 全 部 信息 : 
doNotTrack : 1 

oscpu : Windows NT 10.0 
vendor: 

vendorSub : 

productSub : 20100101 
buildID : 20181001000000 
appCodeName : Mozilla 
appName : Netscape 
appVersion : 5.0 (Windows) 
platform : Win32 
UserAgent : Mozilla/5.0 (Windows NT 10.0; rv:65.0) Gecko/20100101 Firefox/65.0 
product : Gecko 

language : en-US 


图 9.16 JavaScript 实现 获取 浏览 器 信息 


9.16 ”获取 浏览 器 窗口 尺寸 


本 节 我 们 介绍 如 何 获 取 浏览 器 窗口 的 大 小 尺寸 (宽度 和 高 度 ) ， 特 别 区 分 了 浏览 器 窗口 的 整 
体外 部 尺寸 和 内 部 可 视 化 尺寸 。 下 面 介绍 一 个 如 何 通过 JavaScript 实现 获取 浏览 器 窗口 尺寸 的 代码 
实例 。 


【代码 9-18】( 详 见 源 代码 目录 ch09-js-html-get-window-size.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
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06 
07 
08 
09 
10 
11 
12 
13 
14 
5 
16 
El 
18 
19 
20 
21 


22 
23 


24 
25 
26 
27 
28 
29 
30 
3 
32 
33 
34 
35 


36 
二 了 
38 
3 


</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 网 页 特效 - 获取 浏览 器 窗口 尺寸 </nav> 
</header> 


<!-- 添加 文档 主体 内 容 --> 


<div id="id-div-center" style=""> 
<span id="id-span-window-size"></span> 
</div> 
</body> 
<script type="text/javascript"> 
window.onload = function () { 
var s_info = "<b> 浏 览 器 窗口 尺寸 :</b>" + "<br><br>"; 
var Ww_outer size = getWindowOuterSize(); 
s_info += "window.outerWidth: " + w_ outer size.width + " /"+ 
"window.outerHeight: " + w_outer size.height + "<br>"; 
Var Ww inner size = getWindowInnerSize(); 
s_info += "window.innerWidth: " + w inner size.width + " /"+ 
"window.innerHeight: " + w_ inner size.height + "<br><br>"; 
document .getElementById("id-span-window-size") .innerHTML = s_info; 
和 
function getWindowOuterSize() { 
return { 
width: window.outerWidth, 
height: window.outerHeight 
LR 
} 
function getWindowInnerSize() { 
return { 
width: window.innerWidth || document .documentElement.clientWidth, 
height: window.innerHeight || document .documentElement. 
clientHeight 
3 
} 
</script> 
</html> 


关于 【代码 9-18】 的 说 明 : 


@ 第 26~31 行 代码 定义 的 自 定义 方法 getWindowOuterSize() 用 于 获取 浏览 器 窗口 整体 外 部 尺 


寸 ， 这 里 使 用 了 Window 对 象 的 outerWidth 属性 和 outerHeight 属性 。 
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@ ”第 32~37 行 代码 定义 的 自 定义 方法 getWindowInnerSize() 用 于 获取 浏览 器 窗口 内 部 可 视 化 尺 
寸 , 这 里 使 用 了 Window 对 象 的 innerWidth 属性 和 innerHeight 属性 .同时 ,还 使 用 了 Document 
对 象 的 clientWidth 属性 和 clientHeight 属性 ， 主 要 是 用 来 保证 早期 ]E 浏览 器 版 本 的 兼容 性 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 9.17 所 示 。 
+ 


辆 JavaScript 全 入 实例 x 


国 Javascript 全 入 实例 x | a 


回合 


CG © localhost63342/js- "回合 从 GC © localhost6334 


JavaScript 网 页 特效 - 获取 浏览 器 窗口 尺寸 


JavaScript 网 页 特效 - 获取 浏览 器 窗口 尺寸 


浏览 器 窗口 尺寸 : 


window.outerWidth: 489 / window.outerHeight: 352 
‘window.innerWidth: 477 / window.innerHeight: 271 


浏览 严 窗 口 尺 寸 : 


window.outerWidth: 450 / window.outerHeight: 310 
‘window.innerWidth: 438 / window.innerHeight: 229 


调整 浏览 器 窗口 大 小 后 的 尺寸 变化 


图 9.17 JavaScript 实现 获取 浏览 器 窗口 尺寸 


9.17 “屏蔽 键盘 功能 键 


本 节 我 们 介绍 如 何在 浏览 器 窗口 中 屏蔽 功能 键 ， 主 要 测试 Shit、Ctrl 和 Alt 这 三 个 功能 键 。 下 
面 看 一 下 具体 的 JavaScript 代码 实例 。 


【代码 9-19】( 详 见 源 代码 目录 ch09- 


ml-forbidden-fkey html 文件 ) 


01 <script type="text/javascript"> 

02 window.onload = function (ev) { 

03 document .onkeydown = function (ev) { 
04 Var event = ev || window.event; 
05 if (event.shiftKey) { 

06 alert ("禁止 按 shift 键 !"); 

07 return false; 

08 } else if (event.ctrlKey) { 

09 alert (" 禁 止 按 Ctrl 键 !") 7 

10 return false; 

了 人 } else if (event.altKey) { 

12 alert ("禁止 按 Alt 键 !"); 

TS return false7 

14 } else {} 

下 区 console.log (event .key) 7 

16 1 


yh }; 
18 </script> 


关于 【代码 9-19】 的 说 明 : 

@ 第 03~16 行 代码 通过 监听 Document 对 象 的 键盘 按键 onkeydown 事件 判断 用 户 是 否 按 下 了 
Shift (event.shiftKey )、Ctrl (event.ctriKey ) 和 Alt (event.altKey ) 这 三 个 功能 键 ， 然 后 通过 
return 返回 值 (false ) 屏蔽 这 三 个 功能 键 。 其 中 ,第 15 行 代码 增加 了 一 行 控制 台 的 输出 信息 ， 
用 于 记录 用 户 的 按键 操作 (event.key ) 过 程 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 9.18 所 示 。 
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展品 nspector 加 Console DDebugger » 


会 时 Flteroutput 口 Persist Logs 
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图 9.18 JavaScript 实现 屏蔽 键盘 功能 键 


如 图 9.18 中 所 示 ， 在 左边 页 面 的 浏览 器 控制 台中 显示 了 用 户 操作 的 一 些 按键 信息 ， 在 右边 页 
面 中 演示 了 当 用 户 尝试 按 下 Ctrl + C 功能 键 进行 复制 操作 后 的 效果 (Ctrl 键 被 屏蔽 了 ) 。 


9.18 页面 窗口 动画 缩放 


本 节 我 们 将 实现 一 个 让 页 面 窗口 动画 缩放 的 功能 ， 主 要 是 通过 Window 对 象 的 resizeBy() 方 法 
按照 设 定 的 时 间 间 隔 动态 调整 窗口 尺寸 , 达到 页 面 窗口 慢 慢 放大 和 缩小 的 效果 。 下 面 看 一 下 具体 的 
JavaScript 代码 实例 。 


【代码 9-20】( 详 见 源 代码 目录 ch09-js-html-window-ani-size.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 


07 <body> 
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08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 网 页 特效 - 页 面 窗口 动画 缩放 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center" style=""> 

14 设 定 缩放 尺寸 :gnbsp; gnbsp; 

LS <input type="text" id="id-input-size" value=""/> 

16 <input type="button"” value=" 动 画 放大 窗口 " 

onclick="ani large('id-input-size');"/> 
于 了 <input type="button" value=" 动 画 缩小 窗口 " 
onclick="ani small('id-input-size');"/> 

18 </div> 

19 </body> 

20 <script type="text/javascript"> 

人 2 和 var timerLarge = null, timerSmall = null; 

人 2 Var oWidth = 0, oHeight = 0; 

23 Var scrWidth = screen.availWidth; 

24 var srcHeight = screen.availHeight; 

25 function ani large(thisid) { 

26 var size = document .getElementById(thisid) .value; 

pT Var win = window.open("open.html", "", " blank", "width=350, 
height=300"); 

28 win.moveTo(0, 0); 

29 timerLarge = setInterval (function () { 

30 win.resizeBy (size, size); 

3 omidth = win.outerWidth; 

2 oHeight = win.outerHeight; 

33 win.location.reload(); 

34 if (oWidth >= scrWidth || oHeight >= srcHeight) { 

35 clearInterval (timerLarge); 

36 timerLarge = null; 

37 } 

38 }, 1000); 

39 } 

40 function ani small(thisid) { 

41 var size = document .getElementById (thisid) .value; 

42 Var win = window.open("open.html", "", " blank", "width=600, 
height=450"); 

43 win.moveTo(0, 0); 

44 timerSmall = setInterval (function () { 

45 win.resizeBy(-size, -size); 

46 oWidth = win.outerWidth; 

47 oHeight = win.outerHeight; 


48 win.location = win.location; 

49 if (oWidth < 10 || oHeight < 10) { 
50 clearInterval (timerSmall); 

3 timerSmall = null; 

52 上 

353 }, 1000); 

54 } 

55 </script> 

56 </html> 


关于 【代码 9-20】 的 说 明 : 

@ 第 15 行 代码 通过 <input> 标 签 元 素 定义 了 一 个 文本 框 ， 用 于 设置 窗口 动画 缩放 的 调整 尺寸 。 

@ 第 16 行 和 第 17 行 代码 分 别 通过 <input> 标 签 元 素 定 义 了 两 个 按钮 ， 一 个 用 于 动画 放大 窗口 
(ani large() )， 一 个 用 于 动画 缩小 窗口 (ani_small0 )。 

e@ 第 25~39 行 代码 是 ani_large() 事 件 方法 的 实现 过 程 。 其 中 ， 第 29~ 38 行 代码 定义 了 一 个 计 
时 器 。 第 30 行 代码 通过 调用 Window 对 象 的 resizeBy() 方 法 调整 页 面 窗 口 尺寸 大 小 。 另 外 ， 
第 34~37 行 代码 通过 if 条 件 语句 判断 调整 后 的 窗口 尺寸 是 否 超 出 了 屏幕 可 用 尺寸 ， 如 果 超 
出 了 就 通过 清除 计时 器 停止 窗口 放大 操作 。 

@ 第 40~54 行 代码 是 ani small0 事 件 方法 的 实现 过 程 ， 原 理 与 ani_large() 事 件 方法 类 似 ， 在 调 
整 后 的 窗口 尺寸 小 于 数值 10 后 停止 窗口 缩小 操作 。 


9.19 定时 关闭 页 面 


本 节 我 们 实现 一 个 定时 关闭 页 面 窗口 的 功能 ， 有 具体 方法 是 先 设 定 一 个 定时 器 ， 再 通过 调用 
Window 对 象 的 close0 方 法 来 实现 关闭 页 面 窗口 的 操作 。 下 面 看 一 下 具体 的 JavaScript 代码 实例 。 


【代码 9-21】( 详 见 源 代码 目录 ch09-js-html-time-close-window.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 网 页 特效 - 定时 关闭 页 面 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 
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13 <div id="id-div-center" style=""> 
14 设 定 定 时 关闭 窗口 时 间 : 
15 <input type="text" id="id-input-time" value=""/> 
16 <input type="button"” value=" 定 时 关闭 页 面 " onclick="set time close 
('id-input-time');"/> 
17 </div> 
18 </body> 
19 <script type="text/javascript"> 
20 var timer = null; 
< var win = null; 
2 function set time close(id) { 
2 var 七 = document .getElementById(id) .value; 
24 var timeClose = t || -1; 
人 25 if (timeClose != -1) { 
26 timer = setTimeout (function () { 
Eo win = window.open('', '_self', ''); 
28 win.close() 7 
29 timer .clearTimeout (); 
30 }, timeClose); 
Sk } 
32 } 
33 </script> 
34 </html> 


关于 【代码 9-21】 的 说 明 : 


@ 第 15 行 代码 通过 <input> 标 签 元 素 定义 了 一 个 文本 框 ， 用 于 设置 定时 关闭 页 面 的 延迟 时 长 。 
@ 第 16 行 代 码 通 过 <input> 标 签 元 素 定义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方法 
(set_time_close() )， 用 于 执行 定时 关闭 页 面 的 操作 。 
@ 第 22~32 行 代码 是 set time close() 事 件 方法 的 实现 过 程 。 其 中 ， 第 26 ~ 30 行 代 码 定 义 了 一 
个 计时 器 ， 先 在 第 27 行 代码 中 通过 调用 Window 对 象 的 open() 方 法 重新 打开 一 次 当前 页 面 ， 
再 在 第 28 行 代码 中 通过 调用 Window 对 象 的 close() 方 法 关闭 页 面 。 当然 关闭 页 面 操作 是 在 定 
时 器 执行 完毕 后 才 完 成 的 。 


9.20 ”修改 浏览 器 标题 


本 节 我 们 介绍 一 下 如 何 修改 浏览 器 的 标题 浏览 器 标题 是 通过 <title> 标 签 元 素 定义 的 ) ， 通 过 


修改 Document 对 象 的 title 属性 就 可 以 完成 修改 浏览 器 标题 。 下 面 看 一 下 具体 的 JavaScript 代码 
实例 。 


【代码 9-22】( 详 见 源 代码 目录 ch09-js-html-time-close-window.html 文件 ) 


01 <!doctype html> 
02 <htm1l lang="en"> 


03 <head> 
04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 网 页 特效 - 修改 浏览 器 标题 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center" style=""> 


14 新 的 浏览 器 标题 : 


5 <input type="text" id="id-input-title" value=""/> 

16 <input type="button" value=" 修 改 浏览 器 标题 " 
onclick="modifyTitle('id-input-title');"/> 

17 </div> 

18 </body> 

19 <script type="text/javascript"> 

20 We 

el * modify browser title 

区 2 * @param id 

23 a 

24 function modifyTitle(id) { 

25 Var new title = document .getElementById (id) .value; 

26 document .title = new title; 

27 } 

28 </script> 

29 </html> 


关于 【代码 9-22】 的 说 明 : 
@ 第 15 行 代码 通 过 <input> 标 签 元 素 定义 了 一 个 文本 框 ， 用 于 填写 新 的 (打算 修改 的 ) 浏览 器 
标题 。 
@ 第 16 行 代码 通过 <input> 标 签 元 素 定义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方法 
(modifyTitle() )， 用 于 执行 修改 浏览 器 标题 的 操作 。 
@ 第 24~27 行 代码 是 modifyTitle() 事 件 方法 的 实现 过 程 ， 其 中 第 26 行 代码 通过 修改 Document 
对 象 的 title 属性 来 完成 修改 浏览 器 标题 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 9.19 所 示 。 
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图 9.19 JavaScript 实现 屏蔽 键盘 功能 键 


如 图 9.19 所 示 ， 左 边 页 面 中 的 浏览 器 标题 为 初始 定义 的 ， 右 边 页 面 中 的 浏览 器 标题 为 用 户 修 
改 的 “新 的 浏览 器 标题 ”) 。 


第 10 章 DIV+CSS 特效 


本 章 介绍 如 何 通过 JavaScript 来 实现 DIV 与 CSS〈( 层 肢 样 式 表 ) 的 特效 ， 通 过 这 些 特 效 来 丰 
富 HTML 页 面 的 设计 手段 和 展示 效果 。 


10.1 DIV 与 层 又 样式 表 概述 


CSS (Cascading Style Sheets) 是 指 层 登 样式 表 ， 是 W3C 推出 的 格式 化 网 页 内 容 的 标准 技术 ， 
用 于 定义 HTML 元 素 的 显示 形式 。CSS 主要 包括 盒子 模型 、 列 表 模 块 、 超 链接 方式 、 语 言 模块 、 
背景 和 边框 、 文 字 特 效 、 多 栏 布局 等 模块 。 

DIV (DIVision) 是 用 于 层 合 样式 表 中 的 定位 技术 ， 即 为 划分 (设计 人 员 更 习惯 称 为 “ 层 ”》。 
在 HTML DOM 中 ，DIV 元 素 是 用 来 为 大 块 〈block-level) 的 内 容 提供 结构 和 背景 的 容器 。 

对 于 HTML 网 页 布局 方式 的 演变 而 言 ，DIV+CSS 方式 是 最 新 、 最 流行 的 Web 设计 标准 。 该 
方式 与 传统 通过 表格 (table) 布局 定位 方式 的 显著 不 同 就 是 可 以 实现 网 页 页 面 内 容 与 表现 相 分 离 。 
DIV+CSS 方式 使 得 页 面 结构 更 加 清晰 、 逻 辑 更 加 合理 、 代 码 也 更 加 精简 ， 这 样 就 提高 了 页 面 的 访 
问 速度 ， 并 增强 了 用 户 体验 效果 。 

通过 JavaScript 脚本 语言 ， 可 以 针对 DIV+CSS 进行 编程 设计 ， 实 现 多 种 多 样 的 页 面 特效 。 后 
面 将 为 读者 介绍 一 些 DIV+CSS 特效 的 代码 实例 。 


10.2 ”同时 改变 多 个 DOM 样式 


前 文中 提 到 ，DIV+CSS 方式 的 显著 特点 就 是 将 网 页 内 容 与 表现 相 分 离 。 简 单 来 讲 ， 就 是 页 面 
中 可 能 有 多 个 DOM 内 容 是 同一 类 型 属性 的 ， 可 以 使 用 DIV 元 素 设计 在 同一 个 “ 层 ” 内 ， 并 使 用 
相对 应 的 CSS 样式 进行 表现 。 这 样 ， 当 我 们 修改 CSS 样式 时 ， 就 会 同时 改变 多 个 DOM 内 容 的 
样式 。 

下 面 介绍 一 个 通过 JavaScript 实现 同时 改变 多 个 DOM 样式 的 代码 实例 。 


【代码 10-1】( 详 见 源 代码 目录 ch10-js-html-divcss-dom.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 
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05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 网 页 特效 - 同时 改变 多 个 DOM 的 样式 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-center" style=""> 
14 <p> 第 一 段 内 容 . . .</p> 

15 <P> 第 二 段 内 容 . . .</p> 

16 <P> 第 三 段 内 容 . . .</p> 


7 <input type="button" onclick="changeFont (20) ;"” value=" 大 字体 "/> 
18 <input type="button" onclick="changeFont (14) ;"” value=" 正 常 字体 "/> 
19 <input type="button" onclick="changeFont (8);"” value=" 小 字体 "/> 
20 </div> 

21 </body> 

22 <script type="text/javascript"> 

2 function changeFont (size) { 

24 var fontSize = size + 'px'; 

pd Var ps = document .getElementsByTagName ('p'); 

26 for (var i = 0; i < ps.length; i++) { 

27 Ps[i]l.style.fontSize = fontSize; 

28 } 

29 了 

30 </script> 

31 </html> 


关于 【代码 10-1】 的 说 明 : 

@ 第 14~16 行 代码 通过 <p> 标 签 元 素 定义 了 一 组 段落 ， 后 面 将 通过 JavaScript 脚本 同时 改变 这 
一 组 段落 文本 的 字体 大 小 。 

@ 第 17~19 行 代码 通过 <input> 标 签 元 素 定义 了 一 组 按钮 ， 并 定义 了 单 击 onclick 事件 方法 

(changeFont() )， 用 于 执行 改变 字体 大 小 的 操作 。 

@ 第 23~29 行 代码 是 changeFont() 方 法 的 实现 过 程 。 其 中 ,第 25 行 代码 先 获取 了 全 部 <p> 标 签 
元 素 的 对 象 集合 ， 第 26~ 28 行 代码 通过 for 循环 迭代 语句 遍历 全 部 <p> 标 签 元 素 ， 通 过 第 27 
行 代码 修改 Style 对 象 的 fontSize 属性 来 改变 <p> 标 签 元 素 内 容 的 字体 大 小 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 10.1 所 示 。 

如 图 10.1 箭头 和 标识 所 示 ， 左 边 页 面 中 为 初始 正常 字体 的 效果 ， 右 边 页 面 中 为 改变 到 大 字体 

的 效果 。 读 者 可 以 自行 测试 一 下 改变 为 小 字体 的 效果 。 
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图 10.1 JavaScript 实现 同时 改变 多 个 DOM 样式 (一 ) 
读者 可 以 注意 到 ，【 代 码 10-1】 是 通过 逐个 修改 DOM 对 象 的 Style 属性 来 完成 改变 样式 的 。 
其 实 ， 还 有 一 种 更 灵活 的 方式 ， 就 是 通过 修改 样式 类 名 (className) 实现 统一 改变 相关 DOM 对 
象 的 样式 。 下 面 看 一 个 具体 的 JavaScript 代码 实例 。 


【代码 10-2】( 详 见 源 代码 目录 ch10-js-html-divcss-dom-className.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 
05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <style type="text/css"> 
08 .content-small { 

09 font-style: italic; 
10 font-size: small; 

} 

12 .content-medium { 

3 font-style: normal; 
14 font-size: medium; 
5 ， 

16 .content-large { 

7 font-style: italic; 
18 font-size: large; 
19 } 


20 </style> 
21 <body> 
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22 <!-- 添加 文档 主体 内 容 --> 

23 <div id="id-div-center" style=""> 

24 <p class="content-medium"> 这 里 是 第 一 段 . . .</p> 

25 <p _ class="content-medium"> 这 里 是 第 二 段 . . .</p> 

26 <p class="content-medium"> 这 里 是 第 三 段 . . .</P> 

27 <input type="button" onclick="changeClass('content-small');" 
value="Small 风格 "/> 

28 <input type="button" onclick="changeClass('content-medium');" 
value="Medium 风格 "/> 

29 <input type="button" onclick="changeClass('content-large');" 
value="Large 风格 "/> 

30 </div> 

31 </body> 

32 <script type="text/javascript"> 

33 function changeClass(s) { 

34 Var contents = document .getElementsByTagName ('p'); 

35 for (var i = 0; i < contents.length; i++) { 

36 contents[i].className = s; 

3 } 

38 } 

39 </script> 

40 </html> 


关于 【代码 10-2】 的 说 明 : 
@ ”这 上 段 代码 比较 特殊 的 地 方 就 是 , 第 08~11 行 (.content-small)、 第 12~15 行 (.content-medium ) 


和 第 16~19 行 ( .content-large ) 代码 定义 的 CSS 样式 代码 ， 分 别 定义 了 三 种 风格 样式 的 文本 

字体 。 

第 24 ~26 行 代码 通过 <p> 标 签 元 素 定义 了 一 组 段落 ， 注 意 增加 了 class 类 名 属性 的 定义 
("content-medium" )。 

第 27~ 29 行 代码 通过 <input> 标 签 元 素 定义 了 一 组 按钮 ， 并 定义 了 单 击 onclick 事件 方法 
(changeClass() )， 用 于 执行 改变 字体 大 小 的 操作 。 

第 33 ~38 行 代码 是 changeClass() 方 法 的 实现 过 程 。 其 中 ， 第 34 行 代码 先 获取 了 全 部 <p> 标 

签 元 素 的 对 象 集合 ， 然 后 第 35 ~ 37 行 代码 通过 for 循环 和 欠 代 语句 遍历 全 部 <p> 标 签 元 素 ， 通 

过 第 36 行 代码 修改 className 属性 值 来 改变 <p> 标 签 元 素 内 容 的 字体 样式 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 10.2 所 示 。 
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图 10.2 ”JavaScript 实现 同时 改变 多 个 DOM 样式 (二 ) 


10.3 弹出 层 


所 谓 弹 出 层 ， 就 是 指 通过 DIV+CSS 来 模拟 实现 一 个 弹出 窗口 (这 并 不 是 一 个 真正 意义 的 传统 
Window 对 象 弹出 窗口 )。 弹 出 层 的 应 用 场景 非常 多 ， 可 以 模拟 消息 框 、 警 告 框 、 确 认 框 等。 而 且 
由 于 弹出 层 的 可 编程 性 很 强 , 可 以 设计 出 来 各 种 各 样 的 风格 效果 , 因此 在 很 多 流行 的 前 端 框架 中 已 
经 用 其 取代 了 传统 弹出 窗口 的 功能 。 

下 面 介绍 如 何 通过 JavaScript 脚本 语言 来 实现 一 个 很 简单 的 、 只 带 关闭 按钮 的 弹出 层 的 代码 
实例 。 


【代码 10-3】( 详 见 源 代码 目录 ch10-js-html-divcss-popup.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <style type="text/css"> 

08 div#id-div-popup { 

09 display: none; 

10 width: 300px; 

hl height: 100px; 

2 border: lpx solid #ccc; 

3 text-align: center; 

14 font: normal 14px/1.2em "Microsoft Yahei", arial, sans-serif; 
Ti } 


16 </style> 
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17 <body> 
18 <!-- 添加 文档 主体 内 容 --> 
19 <header> 
20 <nav>JavaScript DIV+CSS 特效 - 弹出 层 </nav> 
21 </header> 
22 <!-- 添加 文档 主体 内 容 --> 
23 <div id="id-div-popup"> 
24 <p><input type="button" id="'id-input-popupClose' value='close'/></p> 
25 <p> 这 是 一 个 弹出 层 !</p> 
26 </div> 
27 <input type="button" id='id-input-popupOpen' value=' 弹 出 '/> 
28 </body> 
29 <script type="text/javascript"> 
30 window.onload = function () { 
31 function setCss(_this，cssOption) { // TODO: 设置 元 素 样式 
32 // TODO: 判断 节点 类 型 
33 if (! this || _this.nodeType = 3 || _this.nodeType === 8 
11 ! this.style) { 
34 return; 
35 } 
36 for (var cs in cssOption) { 
3 _this.style[cs] = cssOption[cs]; 
38 } 
39 } 
40 function setPopup(e, openPop, closePop) { 
41 setCss(e，{ // TODO: 初始 化 样式 
42 "position": "absolute", 
43 "zIndex": 100, 
44 "backgroundColor": "#eee" 
45 hm 
46 openPop.onclick = function () { 
47 e.style.display = "block"; 
48 setCssl(le, { 
49 了 GD sr "SOS 
50 时 信访 
51 "marginLeft": -~e.offsetWidth / 2 + "px" 
52 1); 
53 }; 
54 ClosePop .onclick = function () { 
55 e.style.display = "none"; 
56 x 
59 上 
58 setPopup( 
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59 document .getElementById("id-div-popup"), 

60 document .getElementById ("id-input-PopupOPen")， 
61 document .getElementById("id-input-popupClose") 
62 Ds 

63 Fs 

64 </script> 

65 </html> 


关于 【代码 10-3】 的 说 明 : 

@ 第 23 ~26 行 代码 通过 <div> 标 签 元 素 定义 了 一 个 层 ， 其 中 第 24 行 代码 通过 <input 
id='id-input-popupClose> 标 签 元 素 定义 了 一 个 关闭 (close ) 按钮 、 第 25 行 代码 定义 了 一 段 文 
本 ， 我 们 用 这 个 设计 来 模拟 一 个 弹出 层 。 

第 27 行 代码 通过 <input id='id-input-popupOpen'> 标 签 元 素 定义 了 一 个 按钮 ,用 于 激活 弹出 层 。 
第 31~39 行 代码 的 自 定义 方法 setCss() 用 于 设置 元 素 样式 ， 其 中 第 36 ~38 行 代码 通过 for 循 
环 和 迭代 语句 将 全 部 样式 依次 设置 到 元 素 中 。 

@ 第 40~57 行 代码 的 自 定义 方法 setPopup() 用 于 设置 弹出 层 ， 具 体内 容 如 下 。 

> 第 41~45 行 代码 调用 setCss() 方 法 ， 将 元 素 的 position 属性 修改 为 absolute ( 绝对 定位 )， 
这 样 就 可 以 随意 在 整个 页 面 中 进行 定位 了 。 

> 第 46~52 行 代码 绑 定 了 <inputid='id-input-popupOpen> 按 钮 的 单 击 click 事件 方法 。 其 中 ， 
第 47 行 代码 将 弹出 层 的 display 属性 值 改 为 block (可 见 状 态 ); 第 48~52 行 代码 调用 
setCss() 方 法 设置 弹出 层 的 坐标 为 窗口 的 中 间 位 置 。 

> 第 54~ 56 行 代码 绑 定 了 <input id='id-input-popupClose 人 > 按钮 的 单 击 click 事件 方法 ， 用 于 
关闭 弹出 层 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 10.3 所 示 。 
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弹出 


这 是 一 个 弹出 层 ! 


图 103 ”JavaScript 实现 DIV+CSS 弹出 层 


如 图 10.3 中 箭头 和 标识 所 示 ， 单 击 左边 页 面 中 的 “弹出 ”按钮 ， 弹 出 层 的 效果 如 右边 页 面 所 
; 在 右边 页 面 中 单 击 “close ”按钮 ， 则 会 关闭 该 弹出 层 。 
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10.4 用 层 模拟 确认 框 


在 10.3 节 实现 的 弹出 层 其 实 更 像 一 个 简单 的 弹出 式 消息 框 。 前 文中 我 们 也 提 到 了 ， 用 弹出 层 
还 可 以 模拟 出 稍微 复杂 一 些 的 确认 框 效果 。 下 面 介绍 一 个 通过 JavaScript 实现 用 层 模 拟 出 确认 框 效 
果 的 代码 实例 。 


【代码 10-4】( 详 见 源 代码 目录 ch10-js-html-divcss-prompt.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <style type="text/css"> 

08 div#id-div-prompt { 

09 display: none; 

10 width: 300px; 

1 height: 100px; 

12 border: lpx solid #ccc; 

413 text-align: center; 

14 font: normal 14px/1.2em "Microsoft Yahei", arial, sans-serif; 
15 } 

16 </style> 

17 <body> 


18 <!-- 添加 文档 主体 内 容 --> 

19 <header> 

20 <nav>JavaScript DIV+CSS 特效 - 用 层 模拟 确认 框 </nav> 
21 </header> 

22 <!-- 添加 文档 主体 内 容 --> 

23 <div id='id-div-prompt' style=""> 

24 <p> 用 层 模拟 的 确认 框 ， 请 用 户 测试 1!</p> 


25 <p> 

26 <input type="button" id='id-prompt-ok' value=' 确 认 '/> 

27 <input type="button" id='id-prompt-cancel' value=' 取 消 '/> 
28 </P> 

29% </div> 

30 <input type="button" id='id-prompt-open' value=' 弹 出 确认 框 '/> 

31 </body> 


32 <script type="text/javascript"> 
3 window.onload = function () { 
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34 
35 
36 
2 
38 


39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 


50 
5 
52 
53 
54 
55 
56 
Sh 
58 
S53 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 


function div prompt (options) { 
var e = options.prompt，// TODO: 获取 元 素 
setCss = function ( this,，cssOption) { // TODO: 设置 元 素 样式 
// TODO: 判断 节点 类 型 
if (! this || _this.nodeType 


_this.nodeType === 8 || ! this.style){ 

return; 

} 

for (var cs in cssOption) { 
_this.style[cs] = cssOption[cs]; 

} 

return this; 

}; 
setCss (e，{ // TODO: 初始 化 基本 样式 

"position": "absolute", 

"zIndex": 100, 

"top": ( (document .body.scrollTop || document. 
documentElement.scrollTop) + window.screen. 
availHeight / 2 - e.offsetHeight) + "px", 

"backgroundColor": "#eee" 

1); 
options.promptOpen.onclick = function () { // Topo: 打开 确认 按钮 
e.style.display = "block"; 

setCss (e，{ // TODO: 设置 位 置 

"at HOV 

EG 

"marginLeft": -~e.offsetWidth / 2 + "px" 
}) 7 


} 7 

options .promptOk.onclick = function () { // TODO: 确认 按钮 
e.style.display = "none";  // TODO: 隐藏 层 
if (options.okCallBack) options.okCallBack(); 

] 

options .promptCancel.onclick = function () { // Topo: 取消 按钮 
e.style.display = "none"; // TODO: 隐藏 层 
if (options.cancelCallBack) options.cancelCallBack(); 


. 
div prompt ({ 


"prompt": document .getElementById("id-div-prompt"), 
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了 出 "promptOpen": document .getElementById ("id-prompt-open")， 
72 "promptOk": document .getElementById("id-prompt-ok"), 
73 "okCallBack": function () { 
74 alert ("确认 的 回调 函数 ! ") ; 
75 ]， 
76 "promptCancel": document .getElementById("id-prompt-cancel"), 
hs "cancelCallBack": function () { 
78 alert ("取消 的 回调 函数 ! "); 
79 } 
80 Fn 
81 } 7 
82 < /script> 
83 </html> 


关于 【代码 10-4】 的 说 明 : 
@ 第 23~29 行 代码 通过 <div> 标 签 元 素 定义 了 一 个 层 。 其 中 ,第 24 行 代码 定义 了 一 段 文本 ,第 


26 行 代码 通过 <input id='id-prompt-ok> 标 签 元 素 定义 了 一 个 确认 按钮 ,第 27 行 代码 通过 <input 

id='id-prompt-cancel> 标 签 元 素 定义 了 一 个 取消 按钮 ， 这 样 用 层 设计 来 模拟 出 一 个 确认 框 。 

第 30 行 代码 通过 <input id='id-prompt-open 人 > 标签 元 素 定义 了 一 个 按钮 ， 用 于 激活 确认 框 。 

第 34~ 68 行 代码 的 自 定义 方法 div_prompt() 实 现 用 层 模拟 出 来 的 确认 框 ， 具 体内 容 如 下 。 

> 第 36-~45 行 代码 的 自 定义 方法 setCss() 用 于 设置 元 素 样式 , 其 中 第 41 ~ 43 行 代码 通过 for 
循环 迭代 语句 将 全 部 样式 依次 设置 到 元 素 中 。 

> 第 46-51 行 代码 调用 setCss() 方 法 ， 将 元 素 的 position 属性 修改 为 absolute ( 绝对 定位 )， 
这 样 就 可 以 随意 在 整个 页 面 中 进行 定位 了 。 

> 第 52~ 59 行 代码 绑 定 了 <input id='id-promptropen> 按 钮 的 单 击 click 事件 方法 , 第 53 行 代 
码 将 弹出 层 的 display 属性 值 改 为 block (可 见 状态 )， 第 54 ~ 58 行 代码 调用 setCss() 方 法 
设置 弹出 层 的 坐标 为 窗口 的 中 间 位 置 。 

> 第 60~63 行 代码 绑 定 了 <input id='id-prompt-ok> 按 钮 的 单 击 click 事件 方法 ， 用 于 执行 确 
认 操 作 。 

> 第 64~ 67 行 代码 绑 定 了 <input id='id-prompt-cancel> 按 钮 的 单 击 click 事件 方法 , 用 于 执行 
取消 操作 。 

第 69 ~ 80 行 代码 通过 调用 div_prompt() 自 定义 方法 并 设 定 相关 参数 ， 实 现 了 用 层 模 拟 出 来 的 

确认 框 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 10.4 所 示 。 


如 图 10.4 中 箭头 所 示 ， 页 面 中 分 别 演示 了 用 层 模拟 确认 框 的 效果 ， 以 及 用 户 单 击 “ 确 认 ” 和 
“取消 ”后 执行 回调 函数 的 效果 。 


第 10 章 DIV+CSSs 特效 | 227 


| oescipt 人 Sx x 际 


3 CC © localhost63342 加 说 罗 EC © Ilocalhost63342 回 衣 六 


JavaScript DIV+CSS 特 效 - 用 层 模拟 确认 框 JavaScript DIV+CSS 特 效 - 用 层 模拟 确认 框 


葬 JavaScript 全 程 详 殉 
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图 10.4 JavaScript 实现 用 层 模拟 确认 框 


10.5 隐藏 层 


在 HTML 网 页 设计 中 ， 对 于 层 (DIV) 的 使 用 是 非常 灵活 的 。 在 很 多 设计 场景 下 ， 需 要 层 在 
可 见 和 隐藏 两 种 状态 下 反复 切换 来 满足 实际 需求 ， 这 就 是 隐藏 层 的 舞台 了 。 一般， 隐藏 层 是 通过 设 
定 CSS 样式 的 Display 属性 (nonelblock) 实现 的 。 下 面 介绍 一 个 通过 JavaScript 实现 隐藏 层 的 代码 
实例 。 


【代码 10-5】( 详 见 源 代码 目录 ch10-js-html-divcss-hidden.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript DIV+CSS 特效 - 隐藏 层 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 
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13 <div id="id-div-hidden"> 
14 <p> 这 是 一 个 隐藏 层 !</p> 

15 <P> 请 用 户 切换 “隐藏 /显示 ”效果 !</p> 

16 </div> 

17 <input type="button" id='id-input-hidden' value=' 隐 藏 上 面 的 层 '/> 
18 <input type="button" id='id-input-show' value=' 显 示 隐 茂 层 ' /> 

19 </body> 

20 <script type="text/javascript"> 


bh window.onload = function () { 
人 2 document .getElementById("id-input-hidden") .onclick = function () { 
28 document .getElementById("id-div-hidden") .style. 
display = "none"; // 隐藏 元 素 
24 bs 
25 document .getElementById("id-input-show") .onclick = function () { 
26 document .getElementById("id-div-hidden") .style. 
display = "block"; // 显示 元 素 
27 }; 
28 }; 
29 </script> 
30 </html> 


关于 【代码 10-5】 的 说 明 : 

@ 第 13~16 行 代码 通过 <div id="id-div-hidden"> 标 签 元 素 定义 了 一 个 层 ， 并 定义 了 一 些 文本 ， 
我 们 用 这 个 设计 来 模拟 一 个 隐藏 层 。 

@ 第 17 行 和 第 18 行 代码 通过 <input> 标 签 元 素 定义 了 两 个 按钮 ， 分 别 用 于 执行 隐藏 和 显示 上 面 
第 13 ~ 16 行 代码 所 定义 隐藏 层 的 操作 。 

@ 第 23 行 和 第 26 行 代 码 分 别 通过 设 定 层 (<div id="id-div-hidden"> ) 的 Display 属性 值 ("none" 
表示 层 不 可 见 ; "block" 表 示 层 为 块 级 元 素 ， 也 就 是 可 见 的 ) 来 实现 隐藏 层 的 功能 。 


10.6 ”可 拖 动 的 层 


在 前 面 介绍 的 几 个 代码 实例 中 , 层 (DIV) 都 是 位 置 固定 的 , 也 就 是 无 法 通过 鼠标 进行 拖 动 的 。 
而 在 实际 项 目 需求 中 , 层 (DIV ) 一 般 都 是 可 以 拖 动 的 ， 比 如 模拟 出 来 的 弹出 层 是 可 以 满足 用 户 拖 
动 改变 位 置 的 。JavaScript 实现 可 拖 动 的 层 , 需要 对 鼠标 键 的 按 下 (MouseDown)、 移 动 (MouseMove) 
和 松 开 (MouseUp) 事件 进行 编程 ， 并 根据 鼠标 位 置 的 变化 计算 出 可 拖 动 层 的 新 位 置 。 下 面 介绍 一 
个 通过 JavaScript 实现 可 拖 动 层 的 代码 实例 。 
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【代码 10-6】( 详 见 divcss-draggable.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript DIV+CSS 特效 - 可 拖 动 的 层 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-box" style=""> 


14 <h3 align="right" id="id-box-drag" style=""> 

了 <span style="float:left; color:white;"> 标 题 栏 (鼠标 拖 动 )</span> 
16 </h3> 

a <div id="id-box-msg"> 这 是 一 个 可 拖 动 的 层 !</div> 

18 <div id="id-box-pos"></div> 

19 </div> 

20 </body> 


21 <script type="text/javascript"> 
22 var isDrag = false; // TODO: 是 否 正 在 移动 的 标志 变量 


23 var 1 = 0; // TODO: left 变量 

24 var t= 0; // TODO: top 变量 

25 Var x, y; 

26 window.onload = function (ev) { 

2 Var boxDrag = document .getElementById('id-box-drag'); 

28 boxDrag.onmousedown = mouseDown; // TODO: 设置 mousedown 事件 
29 boxDrag.onmousemove = mouseMove; // TODO: 设置 mousemove 事件 
信和 boxDrag.onmouseup = mouseUp; // TODO: 设置 mouseup 事件 
Eh War initPos = MX pos ? 200 7 YY pos 100™"> 

32 document .getElementById('id-box-pos') .innerText = initPos; 

33 

34 Di 

35 * 定义 box 的 鼠标 按 下 事件 

36 wR 

3 function mouseDown (event) { 

38 var e = event; 

39 x = e.clientX; // TODO: 得 到 事件 发 生 的 x 坐标 

40 y = e.clientY; // TODO: 得 到 事件 发 生 的 y 坐标 


41 // TODO: 得 到 box 左上 角 的 坐标 
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42 1 = document .getElementById("id-div-box") .offsetLeft; 
43 t = document .getElementById("id-div-box") .offsetTop; 
44 isDrag = true; 
45 } 
46 ey 
47 * 定义 box 的 鼠标 移动 事件 
48 二 
49 function mouseMove (event) { 
50 if (isDrag) { 
51 Var e = event; 
52 Var box = document .getElementById("id-div-box"); 
53 var newLeft = 1 + e.clientX - x;  // TODO: 计算 新 的 left 的 值 
54 var newTop = 七 +e.clientY - y; // TODO: 计算 新 的 top 的 值 
55 Var newPos = "X pos : " + newLeft + ", Y pos : " + newTop; 
56 document .getElementById('id-box-pos') .innerText = newPos; 
57 box.style.left = newLeft + "px"; 
// TODO: 设置 新 的 left 值 ， 带 上 单位 
58 box.style.top = newTop + "px"; // TODO: 设置 新 的 top 值 ， 带 上 单位 
59 } 
60 } 
61 VE 
62 * 定义 box 的 鼠标 按 下 释放 事件 
63 可 
64 function mouseUp (event) { 
65 if (isDrag) { 
66 isDrag = false; 
67 
68 } 
69 </script> 
70 </html> 


关于 【代码 10-6】 的 说 明 : 

e@ 第 13~19 行 代码 通过 <div id="id-div-box"> 标 签 元 素 定 义 了 一 个 层 。 其中， 第 14 ~ 16 行 代码 
通过 <h3> 标 签 元 素 定义 了 一 个 标题 栏 (用 于 饼 标 拖 动 )， 第 17 ~ 18 行 代码 分 别 定 义 了 一 行文 
本 和 一 个 空 行 用 于 显示 动态 坐标 。 我 们 用 这 个 设计 来 模拟 一 个 可 拖 动 的 层 。 

@ 第 22 行 代码 定义 了 一 个 变量 (isDrag )， 是 用 于 表示 当前 状态 是 否 为 鼠标 正在 拖 动 的 一 个 标 
志 量 。 

e 第 37~45 行 代码 、 第 49 ~ 60 行 代码 和 第 人 4 ~ 68 行 代码 分 别 绑 定 了 可 拖 动 层 (<div 
id="id-div-box"> ) 的 鼠标 按 下 、 鼠 标 移动 和 鼠标 按 下 释放 这 三 个 事件 方法 ， 通 过 计算 可 拖 动 
层 的 坐标 位 置 来 实现 层 的 拖 动 效果 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 10.5 所 示 。 
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娘 Javascript 全 程 实例 x EE 口 x 医 Javascript 全 程 实例 x IF > x 
< © © localhost63342 收回 全 » 三 © © localhost63342/ 加 家 罗 三 
JavaScript DIV+CSS 特 效 - 可 拖 动 的 层 JavaScript DIV+CSS 特 效 - 可 拖 动 的 层 


标题 栏 (鼠标 拖 动 ) 


这 是 一 个 可 拖 动 的 层 ! 
X pos:200,Y pos:100 


图 10.5 _ JavaScript 实现 可 拖 动 的 层 


如 图 10.5 中 的 标识 所 示 ， 左 边 页 面 中 显示 了 可 拖 动 层 的 初始 位 置 ， 右 边 页 面 中 显示 了 可 拖 动 
层 在 经 过 鼠标 拖 动 后 的 新 位 置 。 


可 拖 动 层 在 请 标 拖 动 后 的 新 位 置 


标题 栏 (鼠标 拖 动 ) 


这 是 一 个 可 拖 动 的 层 ! 
Xpos:198,Y pos:168 


10.7 ”让 罩 层 效果 


所 谓 遮 界 层 ， 就 是 为 了 限制 用 户 操作 页 面 中 的 元 素 而 遮 单 住 全 部 页 面 或 局 部 页 面 的 效果 。 例 
如 ,在 需要 实名 认证 的 网 页 中 会 弹出 一 个 提示 框 , 要 求 用 户 填写 认证 信息 ， 如 果 用 户 不 填写 认证 信 
息 就 通过 遮 罩 的 形式 限制 用 户 操作 页 面 内 的 其 他 元 素 。 下 面 介绍 一 个 通过 JavaScript 实现 遮 单 层 效 
果 的 代码 实例 。 


【代码 10-7】( 详 见 源 代 码 目录 ch10-js-html-divcss-masklayerhtml 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <style type="text/css"> 

08 div#id-div-layer { 

09 position: relative; 

10 width: 320px; 

和 height: 160px; 

12 border: lpx solid gray; 

13 margin: 32px auto; 

14 Padding: 2px; 

ke font: normal 14px/1.2em "Microsoft Yahei", arial, sans-serif; 
16 } 

17 </style> 
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18 <body> 

19 <!-- 添加 文档 主体 内 容 --> 

20 <header> 

2 <nav>JavaScript DIV+CSS 特效 - 遮 单 层 效果 </nav> 
22 </header> 

23 <!-- 添加 文档 主体 内 容 --> 

24 <xdiv id="id-div-layer" style=""> 


25; <p> 测 试 遮 罩 层 效果 :</p> 


26 <p><input type="text"></p> 

EE <p><input type="button" value=" 提 交 "></p> 

28 <div id='id-div-maskLayer' style="display: none"></div> 
29 </div> 


30 <input type="button" value=' 显 示 遮 音 层 ' id='id-input-showMaskLayer'/> 
31 <input type="button" value='!' 取 消 遮 单 层 ' id='id-input-cancelMaskLayer'/> 
32 <input type="button" value='!' 遮 单 全 部 页 面 ' id='id-input-bodyMaskLayer'/> 
33 <div id='id-div-bodyMaskLayer' style="display: none"></div> 

34 </body> 

35 <script type="text/javascript"> 


36 window.onload = function () { 
六 六 function setCss(_this，cssOption) { // TODO: 设置 元 素 样式 
38 // TODO: 判断 节点 类 型 
39 if (! this || this.nodeType = 3 || this.nodeType === 8 
11 !_this.style) { 
40 return; 
41 } 
42 for (var cs in cssOption) { // TODO: 遍历 设置 样式 
43 _this.style[cs] = cssOption[cs]; 
44 } 
45 return this; 
46 } 
47 document .getElementById("id-input-showMaskLayer"). 
onclick = function () 
48 var divLayer = document .getElementById("id-div-layer"), 
49 maskLayer = document .getElementById("id-div-maskLayer") 
50 setCss (maskLayer，{ // TODO: 初始 化 遮 罩 的 样式 
ih "position": "absolute", 
52 "display”;: "blook”y 
5 “Left "Op 
54 “Eopes "OD 
55 "zIndex": 1000, 
56 packgroundColor™: "#cce", 


57 "height": divLayer.scrollHeight + "px", 
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58 
59 
60 
61 
62 
63 


64 


65 
66 
67 


68 
69 
70 
7 
72 
了 上 
74 


25 
76 


27 
78 
80 
81 
82 
83 
84 
85 
86 
87 
88 
89 
90 


9 


法 


"width": divLayer.offsetWidth + "px", 
/* 兼 容 各 种 浏览 器 的 透明 层 效 果 */ 
"filter": "alpha (Opacity=60)", 
opacity "00"y 
"-mozZ-Opacity": 06n7 
"filter": "progid:DXImageTransform.Microsoft.Alpha 
(Opacity=60)", 
"-MS-filter": "progid:DXImageTransform.Microsoft.Alpha 
(Opacity=60)" 
1D); 
ye 
document .getElementById("id-input-cancelMaskLayer") .onclick = 
function () { 
var divLayer = document .getElementById("id-div-layer"), 
maskLayer = document .getElementById("id-div-maskLayer"); 
setCss (maskLayer，{ // TODO: 初始 化 遮 罩 的 样式 
"display": "none" 
Ds; 
Yn 
document .getElementById ("id-input-bodyMaskLayer") .onclick = 
function () { 
var body = document .body.parentNode, 
maskLayer = document .getElementById 
("id-div-bodyMaskLayer"); 
setCss (maskLayer, { // TODO: 初始 化 遮 罩 的 样式 
"position": "absolute"， 
nadliaplay"s "DLock”y 
ml 
Ep px 
"zIndex": 1000, 
"backgroundColor": "#ccc", 


"height": body.scrollHeight + "px", 
"width": body.offsetWidth + "px", 
/* 兼 容 各 种 浏览 器 的 透明 层 效 果 */ 


"filter": "alpha (Opacity=60)", 

wopacity"s O06 

=WOZ=OPaCEEY” "0.6"y 

"filter": "progid:DxImageTransform.Microsoft.Alpha 
(Opacity=60)", 

"-MS-filter": "progid:DXImageTransform.Microsoft.Alpha 
(Opacity=60)" 

1D); 
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93 下 
94 ]7 

95 </script> 
96 </html> 


关于 【代码 10-7】 的 说 明 : 
@ 第 24~ 29 行 代码 通过 <div id="id-div-layer"> 标 签 元 素 定义 了 一 个 层 , 该 层 的 CSS 样式 定义 见 
第 08 ~ 16 行 代码 。 其 中 ， 第 25 ~ 27 行 代码 定义 了 一 些 可 操作 的 元 素 ， 目 的 是 模拟 出 一 个 表 
单 内 容 ; 第 28 行 代码 通过 <div id='id-div-maskLayer> 标 签 元 素 定义 了 一 个 庶 罩 层 ， 这 里 注意 
一 下 Style 样式 中 display 属性 (none ) 的 使 用 。 我 们 通过 这 样 的 设计 来 实现 让 罩 层 的 效果 。 
e@ 第 33 行 代码 通过 <div id='id-div-bodyMaskLayer> 标 签 元 素 定义 了 另 一 个 庶 罩 层 , 与 前 一 个 遮 罩 
层 (<div id='id-div-maskLayer> ) 不 同 的 是 ， 通 过 这 个 遮 单 层 可 以 实现 整个 页 面 被 遮 音 的 效果 。 
@ 第 37~ 46 行 代码 的 自 定义 方法 setCss() 用 于 设置 元 素 样式 ， 其 中 第 42 ~ 44 行 代码 通过 for 循 
环 和 迭代 语句 将 全 部 样式 依次 设置 到 元 素 中 。 
e@ 第 47~ 66 行 代码 定义 的 事件 处 理 方法 实现 了 层 (<div id="id-div-layer"> ) 的 遮 罩 效果 ， 具 体 
内 容 如 下 。 
> 第 52 行 代码 将 遮 罩 层 (<div id='id-div-maskLayer> ) 的 display 属性 值 改 为 block ( 可 见 状 
态 )。 
> 第 57~58 行 代码 根据 层 (<div id="id-div-layer"> ) 的 宽 高 尺寸 重新 计算 了 遮 单 层 (<div 
id='id-div-maskLayer> ) 的 宽 高 尺寸 。 
> 第 60~64 行 代码 定义 了 兼容 各 种 浏览 器 的 透明 层 效 果 。 
@ 第 74~94 行 代码 定义 的 事件 处 理 方法 实现 了 整个 页 面 的 遮 音 效果。 注意 ， 第 75 行 代码 获取 


的 是 body 对 象 的 父 元 素 节点 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 10.6 和 图 10.7 所 示 。 
i 阴 Javascript 全 程 实例 xi+ = 0 0 | 本 铬 JavaScript 全 程 实 例 x 有 = 口 x 
© © localhost63342/ ee 合 | 站 | 二 GC © localhost:63342 咏 回合 | 为 | 三 
JavaScript DIV+CSS 特 效 - 遮 赤 层 效 果 JavaScript DIV+CSS 特 效 - 遮 胃 层 效果 
测试 遮 军 层 效 果 : 测试 这 曙 层 效果 
| 
提交 提交 
显示 庶 军 层 。 取消 这 军 层 。 这 替 全 部 页 面 显示 这 替 层 | 取消 这 军 层 。 庶 替 全 部 页 面 


10.6 JavaScript 实现 遮 章 层 效 果 (一) 


如 图 10.6 所 示 ， 左 边 页 面 中 显示 了 方 框 区 域 未 被 遮 罩 的 效果 ， 右 边 页 面 中 显示 了 方 框 区 域 被 
庶 单 的 效果 。 
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各 JavaScipt 全程 详 例 x Bs = 


CG ©localhost63342 v 收回 安 必 


JavaScript DIV+CSS 特 效 - 这 深层 效果 


测 所 这 宇 层 效果 : 


时 未 王后 下 肖 谊 至 后 【 运 宇 全 部 页 面 


图 10.7 JavaScript 实现 遮 单 层 效果 〈 二 ) 
如 图 10.7 所 示 ， 该 页 面 显 示 了 整个 页 面 被 遮 淖 层 所 谈 单 的 效果 。 


10.8 Tab 选项 卡 


Tab 选项 卡 可 以 帮助 网 页 用 户 自由 切换 自己 想 要 的 内 容 及 模块 。 例 如 ， 购 物 网 站 有 很 多 产品 ， 
每 个 产品 都 有 自己 的 种 类 , 如 果 将 所 有 的 产品 名 称 都 显示 出 来 是 不 友好 的 。 这 时 就 需要 将 产品 按 类 
别处 理 ， 每 个 类 别 之 间 使 用 Tab 选项 卡 进行 切换 ， 这 样 不 仅 可 以 提高 浏览 速度 ， 还 增强 了 用 户 交 
互 体验 效果 。 下 面 介绍 一 个 通过 JavaScript 实现 Tab 选项 卡 的 代码 实例 。 


【代码 10-8】( 详 见 源 代码 目录 ch10-js-html-divcss-tab.html 文件 ) 


001 <!doctype html> 
002 <html lang="en"> 


003 <head> 
004 <!-- 添加 文档 头 部 内 容 --> 
005 <title>JavaScript 全 程 实例 </title> 


006 </head> 
007 <style type="text/css"> 


008 .tabSwitchParent { 

009 position: relative; 
010 } 

011 .tabSwitchParent div { 
012 position: relative; 
013 float: left; 

014 } 

015 .tabSwitchTarget { 

016 display: none; 


017 left: Opx; 
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018 CPLDOPXE 
019 z-index: 1; 
020 width: 320px; 
021 height: 64px; 
022 padding: 32px 8px 16px 8px; 
023 border: lpx solid #aaa; 
024 color> #333; 
025 background-color: #eee; 
026 } 
027 #tabSwitch { 
028 position: relative; 
029 float: left; 
030 z-index: 2; 
031 margin: Opx; 
办 3a top: lpx; 
033 bottom: Opx; 
034 font-size: 14px; 
035 text-align: center; 
036 cursor: pointer; 
037 } 
038 #tabSwitch div { 
039 padding: 8px; 
040 border: lpx solid #ccc; 
041 border-bottom: none; 
042 background-color: #fff; 
043 } 
044 #tabSwitch div.on { 
045 border: lpx solid #aaa; 
046 border-bottom: none; 
047 background-color: #eee; 
048 } 
049 </style> 
050 <body> 
051 <!-- 添加 文档 主体 内 容 --> 
052 <header> 
053 <nav>JavaScript DIV+CSS 特效 - Tab 选项 卡 </nav> 
054 </header> 
055 <!-- 添加 文档 主体 内 容 --> 
056 <div id="id-div-center" style=""> 
057 <div class="tabSwitchParent"> 
058 <!-- 选 项 卡 --> 


059 


<div id='tabSwitch'> 
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060 
061 
062 
063 
064 
065 


066 
067 
068 
069 
070 
071 
072 
073 
074 
075 
076 
077 
078 
079 
080 
081 
082 
083 
084 
085 
086 
087 
088 


089 
090 
091 
092 
093 
094 
095 
096 
097 
098 
099 


<div data-target='tabSwitchl' class="on">JavaScript</div> 
<div data-target='tabSwitch2'>jQuery</div> 
<div data-target='tabSwitch3'>NodeJS</div> 

</div> 

<!-- 内 容 --> 

<div class="tabSwitchTarget" style="display: block;" 


id='tabSwitchl'> 


欢迎 您 学 习 《JavaScript 全 程 实例 》 
</div> 
<!-- 内 容 --> 
<div class="tabSwitchTarget" style="" id='tabSwitch2'> 
欢迎 您 学 习 《jQuery 全 程 实例 》 
</div> 
<!-- 内 容 --> 
<div class="tabSwitchTarget" style="" id='tabSwitch3'> 
欢迎 您 学 习 《NodedS 全 程 实例 》 
</div> 
</div> 
</div> 
</body> 
<script type="text/javascript"> 
window.onload = function () { 
function getTypeElement (es，type) { // 获 取 指 定 类 型 的 节点 
var esLen = es.length, 
i=0, 
eaArr = [], 
esI = null; 
for (; i < esLen; i++) { 


Hl 


esI = es[i]; 
if (esI.nodeName.replace("#", ""). 
toLocaleLowerCase() === type) { 


eArr.push (esI); 


return eArr; 
上 
function tabSwitch(e) { 
var divs = getTypeElement (e.childNodes, "div"), 
1 = divs.length, 
= 08 
EEC 
divs[i]l .onclick = function () { // 单 击 切换 按钮 
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100 
101 
102 


103 } 
104 
105 


106 } 
107 } 
108 } 

109 

110 }7 
111 </script> 
112 </html> 


this.className 


or Mar Tl O02 Te 
divs[iil].className = ""; // 删 除 选 项 卡 的 边框 
document .getElementById("tabSwitch" + (ii + 1)).style. 


display = "none"; 


"on"; // 设 置 当前 元 素 的 选中 样式 
document .getElementById (this .getRAttribute ("data-target")). 


style.display = "block"; 


tabSwitch (document .getElementById ("tabSwitch") ); //Tab 选项 卡 切换 


关于 【代码 10-8】 的 说 明 : 


e@ 第 057~076 行 代码 通过 一 组 <div> 标 签 元 素 定义 了 一 个 Tab 控件 。 其 中 , 第 058 ~ 063 行 代码 
定义 了 一 组 Tab 选项 卡 ， 第 064~ 075 行 代码 定义 了 Tab 选项 卡 所 对 应 的 Tab 选项 内 容 。 

@ 第 099~103 行 代码 为 第 057~ 076 行 代码 定义 的 一 组 Tab 选项 卡 分 别 绑 定 了 单 击 onclick 事件 。 
当 单 击 Tab 选项 卡 标签 时 , 修改 被 单 击 元 素 的 样式 为 选中 状态 , 其 他 元 素 修改 为 未 选中 状态 ， 
在 被 选中 的 元 素 节点 上 获取 将 要 显示 的 选项 内 容 id， 将 所 有 的 选项 内 容 隐 藏 ， 即 


“display="none"”, 


然后 显示 选取 内 容 的 对 象 ， 设 置 样式 “display="block"”。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 10.8 所 示 。 
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Tab 选 项 卡 
Tab 选 项 内 容 
JavaScript | jQuery NodeJS 


欢迎 您 学 习 《JavaScript 全 程 实例 》 


JavaScript | jQuery NodelS 


切换 Tab 选 项 卡 
Tab 选 项 内 容 


欢 凶 您 学 习 《jQuery 全 程 实 例 》 


图 10.8 JavaScript 实现 Tab 选项 卡 


如 图 10.8 中 的 标识 所 示 ， 左 边 页 面 中 显示 了 “JavaScript”Tab 选项 卡 的 内 容 ， 右 边 页 面 中 显 


示 了 切换 到 “jQuery”Tab 选项 卡 的 内 容 。 


第 11 章 Ajax 应 用 


本 章 介 绍 如 何 通过 Ajax 技术 来 实现 HTML 网 页 的 应 用 开发 ， 通 过 这 些 应 用 来 丰富 HTML 页 
面 的 设计 手段 和 展示 效果 。 


11.1 Ajax 概述 


Ajax (Asynchronous JavaScript and XML ) 即 异步 的 JavaScript 和 XML， 是 指 一 种 创建 交互 式 
网 页 应 用 的 前 端 开发 技术 。 这 里 特别 需要 强调 的 是 ，Ajax 不 是 一 门 全 新 的 编程 语言 ， 而 是 指 一 种 
前 端 开 发 新 方法 ， 这 是 大 多 数 初学 者 特别 容易 混淆 的 概念 。 

Ajax 技术 的 特点 就 是 前 端 页 面 与 后 台 服 务 器 进行 数据 交互 的 全 新 方式 ， 通 过 核心 的 
XMLHttpRequest 对 象 在 无 须 重 新 加 载 整个 网 页 的 情况 下 ， 可 以 实现 独立 更 新 网 页 中 的 局 部 内 容 。 
而 传统 的 网 页 如 果 需 要 更 新 内 容 ， 则 必须 重 载 整个 网 页 页 面 才 可 以 实现 。 所 以 ，Ajax 会 被 设计 人 
员 定 义 为 “异步 方式 的 JavaScript 和 XML 技术 ”。 

由 于 Ajax 技术 依赖 于 浏览 器 的 JavaScript 和 XML， 因 此 浏览 器 的 兼容 性 和 支持 程度 也 就 和 
JavaScript 运行 时 的 性 能 一 样 重要 了 ， 还 好 这 对 于 如 今 绝 大 多 数 的 主流 浏览 器 (Google Chrome、 
FireFox、Opera、Apple Safari、 微 软 的 IE 系列 和 Microsoft Edge 等 ) 均 不 是 问题 了 。Ajax 技术 不 
需要 额外 安装 任何 浏览 器 插件 ， 只 要 用 户 在 浏览 器 中 允许 JavaScript 脚本 执行 权限 即 可 ， 这 也 是 
Ajax 技术 非常 受 欢迎 的 主要 原因 之 一 。 

通过 Ajax 技术 ， 可 以 实现 很 多 种 Web 前 端 开发 的 特效 。 后 面 将 为 读者 介绍 一 些 常用 的 Ajax 
技术 应 用 。 


11.2 ”Ajax 基础 


Ajax 技术 的 基础 就 是 对 核心 对 象 XMLHttpRequest 的 使 用 ， 如 今 绝 大 多 数 的 主流 浏览 器 均 支 
持 XMLHttpRequest 对 象 〈 不 过 早期 微软 的 IEs 和 IE6 浏览 器 使 用 的 是 ActiveXObject 对 象 ) 。 

对 于 Google Chrome、FireFox、Opera、Apple Safari、 微 软 IE7+ 系 列 和 Microsoft Edge 等 主流 
浏览 器 ， 内 核 中 已 经 内 建 了 XMLHttpRequest 对 象 ， 因 此 创建 XMLHttpRequest 对 象 的 语法 可 以 写 
成 如 下 形式 : 


Var xhr = new XMLHttpRequest(); 
// TODO: Chrome、 FireFox、 Opera、 Safari、 IE7+、 Edge 
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而 对 于 老 版 本 的 IE5 和 IE6， 则 使 用 ActiveXObject 对 象 来 创建 : 

Var xhr = new ActiveXObject ("Microsoft.XMLHTTP"); // TODO: IE5、IE6 

综 上 所 述 ， 为 了 更 好 地 编写 浏览 器 兼容 性 代码 (兼容 绝 大 多 数 浏 览 器 ) ， 可 以 先 检 查 浏 览 器 
是 否 支 持 XMLHttpRequest 对 象 ， 如 果 支 持 就 创建 XMLHttpRequest 对 象 ， 如 果 不 支持 就 创建 
ActiveXObject 对 象 ， 具 体 的 写法 如 下 。 


【代码 11-1】 


01 var xhr = null; // TODO: define XMLHttpRequest Object 

02 if (window.XMLHttpRequest) { // TODO: Chrome, Firefox, Opera, IE7+, 
Edge, etc. 

03 xhr = new XMLHttPRequest (); 

04 } else if (window.ActiveXObject) { // TODO: IE5，IE6 

05 xhr = new ActiveXObject ("Microsoft .XMLHTTP"); 

06 } else { 

07 xhr = null; 

08 } 


关于 【代码 11-1】 的 说 明 : 
e@ 第 01 行 代码 定义 了 一 个 XMLHttpRequest 对象 实 例 (xhr)。 
@ 第 02~08 行 代码 通过 if 条 件 语句 判断 浏览 器 类 型 ,并 根据 判断 结果 选择 创建 XMLHttpRequest 
对 象 的 方式 。 
在 XMLHttpRequest 对 象 (xhr) 创建 成 功 后 ， 就 可 以 向 服务 器 端 发 送 异 步 请 求 并 解析 异步 数 
据 了 ， 参 考 的 写法 如 下 。 


01 if (xhr != null) { 


02 xhr.onreadystatechange = on state change; 
03 xhr.open ("GET|POST", url, true); 

04 xhr.send (nul1) 7 

05 } else { 

06 // TODO: XMLHttpRequest Object is invalid. 
07 } 


关于 【代码 11-2】 的 说 明 : 

@ 第 02 行 代码 通过 XMLHttpRequest 对 象 的 onreadystatechange 事件 ， 定 义 了 当 异 步 请 求 发 送 
到 服务 器 端 后 需要 执行 的 响应 任务 (相当 于 回调 方法 )。 

日 第 03 行 代 码 通过 XMLHttpRequest 对 象 的 open() 方 法 定义 异步 请 求 的 参数 ，GETIPOST 规定 
了 请 求 的 类 型 ，URL 定义 了 请 求 的 链接 地 址 ，true 表示 为 异步 处 理 请 求 。 
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@ 第 04 行 代码 通过 XMLHttpRequest 对 象 的 send() 方 法 执行 将 请 求 发 送 到 服务 器 端的 操作 。 另 
外 ， 如 果 该 方法 带 有 String 类 型 的 参数 ( url 地址 的 参数 集合 )， 则 代表 请 求 类 型 必须 为 POST 


11.3 Ajax 解析 文本 


通过 Ajax 技术 可 以 解析 多 种 类 型 的 数据 和 文件 ， 其 中 最 简单 、 最 基础 的 就 是 解析 文本 文件 。 
下 面 介绍 一 个 通过 Ajax 实现 解析 文本 操作 的 代码 实例 。 


【代码 11-3】( 详 见 源 代 码 目录 ch11-js-ajax-tx 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript ajax 应 用 - 解析 txt 文 本 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-ajax" style=""> 

14 <input type="button" onclick="ajax load txt _ request();" 
value=" 通 过 Ajax 解析 txt 文本 "/> 

15 <span> 解 析 文本 内 容 :</span> 


16 <span id="id-span-ajax-txt"></span> 

17 </div> 

18 </body> 

19 <script type="text/javascript"> 

20 Var xhr = null; // TODO: define XMLHttpRequest Object 

2 function ajax load txt request() { 

2 if (window.XMLHttpRequest) { // TODO: Chrome, Firefox, Opera, 
IE7+, Edge, etc. 

23 xhr = new XMLHttpRequest () 7 

24 } else if (window.ActiveXObject) { // TODO: IES5, IE6 

25 xhr = new ActiveXObject ("Microsoft .XMLHTTP"); 

26 yelse { 

Eg xhr = null; 


28 } 
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29 if (xhr != null) { 
30 xhr.onreadystatechange = on state change; 
六 于 xhr.open ("GET", "ajax.txt", true); 
32 xhr.send (null); 
33 } else { 
34 console.log("Your browser does not support XMLHTTP."); 
5: } 
36 
3 function on state change() { 
38 if (xhr.readyState == 4) { 
39 if (xhr.status == 200) { 
40 document .getElementById('id-span-ajax-txt').innerText = 
xhr.responseText; 
41 } else { 
42 console.log("Problem retrieving data:" + xhr.statusText); 
43 } 
44 } 
45 } 
46 </script> 
47 </html> 


关于 【代码 11-3】 的 说 明 : 
@ 第 14 行 代码 通过 <input> 标 签 元 素 定义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 方法 


(ajax_load txt_ request() )， 用 于 执行 Ajax 异步 解析 文本 文件 的 操作 。 

第 16 行 代码 通过 <span> 标 签 元 素 定 义 了 一 块 行内 区 域 ， 用 于 显示 通过 Ajax 异步 方式 解析 文 

本 文件 所 获取 的 文本 内 容 。 

第 20 行 代码 定义 了 一 个 XMLHttpRequest 对 象 实例 (xhr )， 并 初始 化 为 null。 

第 21~ 36 行 代码 是 ajax_load txt request() 方 法 的 实现 过 程 ， 具 体内 容 如 下 : 

> 第 22~28 行 代码 用 于 创建 XMLHttpRequest 对 象 实例 ( 见 【 代 码 11-1])。 

> 第 29~35 行 代码 用 于 执行 Ajax 异步 请 求 操作 〔( 见 【代码 11-2〗)。 其 中 ， 第 30 行 代码 定 
义 了 回调 方法 (on_state_change() )， 第 31 行 代码 调用 的 open() 方 法 定义 了 异步 请 求 的 文 
本 文件 路 径 ， 为 本 地 的 文本 文件 ("ajax.txt" )。 

第 37~ 45 行 代码 是 on_state_change() 回 调 方法 的 实现 过 程 ， 具 体内 容 如 下 : 

> 状态 值 readyState 属性 值 为 4， 表 示 响 应 内 容 解析 完成 。 

> 状态 码 status 属性 值 为 200， 表 示 异 步 操作 成 功 。 

> XMLHttpRequest 对 象 的 responseText 属性 值 为 解析 后 获取 的 文本 文件 ("ajax.txt" ) 中 的 
内 容 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 11.1 所 示 。 
如 图 11.1 中 的 箭头 所 示 ， 右 边 页 面 中 显示 了 通过 Ajax 异步 方式 解析 文本 文件 ("ajax.txt") 所 
得 到 的 内 容 。 
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图 11.1 Ajax 实现 解析 文本 
11.4 Ajax 解析 XML 


上 一 节 中 介绍 了 通过 Ajax 技术 解析 文本 文件 的 方法 ， 本 节 继 续 介绍 如 何 通过 Ajax 技术 解析 
XML 数据 的 方法 。 下 面 看 一 个 Ajax 解析 XML 文件 并 将 获取 的 数据 填充 到 表格 中 显示 的 代码 实例 。 


【代码 11-4】( 详 见 源 代码 目录 ch11-js-ajax-xml.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <title>JavaScript 全 程 实例 </title> 

06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript Ajax 应 用 - 解析 XML 数据 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <div id="id-div-ajax" style=""> 

14 <input type="button" onclick="ajax load xml request();" 
value=" 通 过 Ajax 解析 XML 数据 "/> 

15 <div id="id-div-ajax-txt"></div> 

16 <div id="id-div-ajax-xml"></div> 

17 </div> 

18 </body> 

19 <script type="text/javascript"> 

20 var xhr = null; // TODO: define XMLHttpRequest Object 

2 function ajax load xml request() { 
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2 if (window.XMLHttpRequest) { // TODO: Chrome, Firefox, Opera, 
IE7+, Edge, etc. 
oe xhr = new XMLHttpRequest (); 
24 } else if (window.ActiveXObject) { // TODO: IE5, IE6 
25 xhr = new ActiveXObject ("Microsoft .XMLHTTP"); 
26 } else { 
27 xhr = null; 
28 } 
29 if (xhr != null) { 
30 xhr.onreadystatechange = on state change; 
3 xhr .open ("GET", "ajax.xml", true); 
32 xhr.send (null); 
33 } else { 
34 console.log("Your browser does not support XMLHTTP."); 
35 | 
3 } 
3 function on_state change() { 
38 if (xhr.readyState == 4) { 
39 if (xhr.status == 200) { 
40 document .getElementById('id-div-ajax-txt'). 
innerText = xhr.responseText; 
41 Var xmlDoc = xhr.responseXML; 
42 Var x = xmlDoc.documentElement .getElementsByTagName ("WEB"); 
43 var V = "<table border='1'><tr><th>Title</th><th>Address</th><th> 
Info</th></tr>"; 
44 var len = x.length; 
45 Var RX: Mn 
46 £0or (let dm 0 < Ions itt)y ET 
47 TV += "<tr>"; 
48 xx = X[i].getElementsBYTagName ('TITLE'); 
49 
50 ry 
51 V+= "<td>" + xx[0] .firstChild.nodeValue + "</td>"; 
2 } catch (er) { 
53 V += "<td> </td>"; 
54 } 
55 } 
56 xx = x[i] .getElementsByTagName ('ADDRESS'); 
57 
58 try { 
59 V+= "<td>" + xx[0] .firstChild.nodeValue + "</td>"; 
60 } catch (er) { 
61 ALO>”5 
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80 


81 </script> 
82 </html> 


于 
xx = x[i] .getElementsByTagName ('INFO'); 
te 
V+= "<td>" + xx[0] .firstChild.nodeValue + "</td>"; 
} catch (er) { 
V += "<td> </td>"; 


T += "</tr>"; 
} 
TV += "</table>"; 
document .getElementById('id-div-ajax-xml') .innerHTML = V7 
} else { 
console.log("Problem retrieving data:" + xhr.statusText); 


1 


关于 【代码 11-4】 的 说 明 : 
@ 第 14 行 代码 通过 <input> 标 签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 方法 


(ajax_load xml_ request(0) )， 用 于 执行 Ajax 异步 解析 XML 文件 的 操作 。 

第 15 行 代码 通过 <div id="id-div-ajax-txt"> 标 签 元 素 定 义 了 一 个 层 区 域 ， 用 于 显示 通过 Ajax 

异步 方式 解析 XML 文件 所 获取 的 文本 内 容 。 

第 16 行 代码 通过 <div id="id-div-ajax-xml"> 标 签 元 素 定 义 了 另 一 个 层 区 域 ,用 于 显示 通过 Ajax 

异步 方式 解析 XML 文件 后 将 所 获取 的 数据 填充 到 一 个 动态 生成 的 表格 。 

第 20 行 代码 定义 了 一 个 XMLHttpRequest 对 象 实例 (xhr )， 并 初始 化 为 null。 

第 21~ 36 行 代码 是 ajax_load_xml request( 方 法 的 实现 过 程 ， 具 体内 容 如 下 : 

> 第 22~28 行 代码 用 于 创建 XMLHttpRequest 对 象 实例 ( 见 【 代 码 11-1])。 

> 第 29~35 行 代码 用 于 执行 Ajax 异步 请 求 操作 〔( 见 【代码 11-2〗)。 其中， 第 30 行 代码 定 
义 了 回调 方法 ( on_state_change() ), 第 31 行 代码 调用 的 open() 方 法 定义 了 异步 请 求 的 XML 
文件 路 径 ， 为 本 地 的 XML 文件 ("ajax.xml" )。 

第 37~ 80 行 代 码 是 on_state_change() 回 调 方法 的 实现 过 程 (参考 【代码 11-3】〗)， 需 要 介绍 的 

内 容 如 下 : 

> 第 40 行 代码 通过 XMLHttpRequest 对 象 的 responseText 属性 获取 了 解析 XML 文件 
("ajax.xml" ) 中 的 内 容 ， 并 通过 层 (<div id="id-div-ajax-txt"> ) 元 素 进行 显示 。 
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> 第 41 行 代码 通过 XMLHttpRequest 对 象 的 responseXML 属性 将 解析 XML 文件 
("ajax.xml" ) 的 结果 作为 Document 对 象 返回 。 

> 第 42~75 行 代码 将 通过 Ajax 异步 方式 获取 的 XML 文件 ( "ajax.xml' ) 数据 填充 进 一 个 
动态 生成 的 表格 中 ， 并 通过 层 (<div id="id-div-ajax-xml"> ) 元 素 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 11.2 和 图 11.3 所 示 。 
如 图 11.2 所 示 ， 页 面 中 显示 了 通过 Ajax 异步 方式 解析 XML 文件 〈"ajax.xml") 所 得 到 的 文本 
内 容 。 


> GC © localhost:63342 回信 了 JavaScript 全 程 实例 x Be 口 x 


GC © localhost:63342 的 安 » 三 
JavaScript Ajax 应 用 - 解析 XML 数 据 


JavaScript Ajax 应 用 - 解析 XML 数 据 


<Jxml version="1.0" encoding="UTF-8"?> 
ee 通过 Ajax 解析 XML 赦 据 
Se 
AQRESS> hitp://ewwscode.coms/ADDRESS> 
eqments </INFO> 


> Re at 
2 


<TITLE>] /TITLE> 
ea camaADDRESs> 


Title Address Info 
JavaScript | http//wwwjscode.com | JavaScript Code Segments 
jQuery |http://wwwjqcode.com |jQuery Code Segments 


ee Ajax http://www.ajaxcode.com | Ajax Code Segments 
/CATALOG> 
图 11.2 Ajax 实现 解析 XML 文件 (文本 方式 ) 图 11.3 Ajax 实现 解析 XML 文件 (XML 方式 ) 


如 图 11.3 所 示 ， 页 面 中 显示 了 通过 Ajax 异步 方式 解析 XML 文件 〈"ajax.xml") 并 将 返回 的 数 
据 填 充 进 一 个 动态 生成 的 表格 中 的 效果 。 由 此 可 见 , Ajax 应 用 使 用 严格 的 XML 文件 的 效果 会 更 好 ， 
数据 操作 也 更 快速 、 简 洁 。 


11.5 Ajax 解析 JSON 


在 8.4 节 中 介绍 了 通过 Ajax 解析 文本 文件 和 XML 文件 的 方法 ， 本 节 将 介绍 如 何 通 过 Ajax 技 
术 解 析 JSON 格式 数据 的 方法 。 所 谓 JSON (JavaScript Object Notation) ， 是 指 一 种 JavaScript 对 
象 标记 ， 是 遵循 ECMAScript 规范 标准 设计 的 ， 是 一 种 目前 非常 流行 的 轻 量 级 数据 交换 格式 。 下 面 
看 一 个 Ajax 解析 JSON 文件 并 将 获取 的 数据 填充 到 表格 中 显示 的 代码 实例 。 


【代码 11-5】( 详 见 源 代 码 目录 ch11-js-ajax-json.html 文件 ) 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 
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05 
06 
07 
08 
09 
10 
ii 
12 
13 
14 


15 
16 
7 
18 
19 
20 
21 
22 


2 
24 
25 
26 
27 
28 
FA 
30 
3 
32 
33 
34 
35 
36 
世人 
38 
3 
40 
41 


42 
43 
44 


<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript Ajax 应 用 - 解析 JSON 数据 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 


<div id="id-div-ajax" style=""> 


<input type="button" onclick="ajax load json request();" 


value=" 通 过 Ajax 解析 JSON 数据 "/> 
<div id="id-div-ajax-txt"></div> 


<div id="id-div-ajax-json"></div> 


</div> 
</body> 
<script type="text/javascript"> 


var xhr = null; // TODO: define XMLHttpRequest Object 
function ajax load json request() { 
if (window.XMLHttpRequest) { // TODO: Chrome, Firefox, Opera, 
IE7+, Edge, etc. 
xhr = new XMLHttpRequest (); 
} else if (window.ActiveXObject) { // TODO: IE5, IE6 
xhr = new ActiveXObject ("Microsoft .XMLHTTP"); 
} else { 
xhr = null; 
’ 
if (xhr != null) { 
xhr.onreadystatechange = on state change; 
xhr.open ("GET", "ajax.json", true); 
xhr.send (null); 
} else { 
console.log("Your browser does not support XMLHTTP."); 


function on _ state change() { 
if (xhr.readyState == 4) { 
if (xhr.status == 200) { 
var jsonDoc = xhr.responseText; 
document .getElementById('id-div-ajax-txt'). 


innerText = jsonDoc; 


var jsonObj JSON .parse (jsonDoc); 
var jsonWeb = jsonObj .web; 


var len = jsonWeb.length; 
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45 Var Vv = "<table border='1'><tr><th>Title</th><th>Address</th><th> 
Info</th></tr>"; 

46 for (let 1 = 0 1 < len? it+t+) { 

47 了 += "<tr>"; 

48 { 

49 Cey 1 

50 V += "<td>" + jsonWeb[i].title + "</td>"; 

51 } catch (err) { 

Ra V += "<td> </td>"7 

汪 污 } 

54 | 

{ 

56 try 

57 V += "<td>" + jsonWeb[i].address + "</td>"; 

58 } catch (err) { 

59 V += "<td> </td>"; 

60 

61 } 

62 { 

63 Ce 

64 V += "<td>" + jsonWeb[i].info + "</td>"; 

65 } catch (err) { 

66 V += "<td> </td>"; 

67 } 

68 } 

69 

70 } 

i V += "</table>"; 

有 document .getElementById('id-div-ajax-json') .innerHTML = v; 

73 } else { 

74 console.log("Problem retrieving data:" + xhr.statusText); 

2 } 

76 ’ 

Rh } 

78 </script> 

79 </html> 


+= "</tr>"; 


< 


关于 【代码 11-5】 的 说 明 : 
@ 第 14 行 代码 通过 <input> 标 签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 方法 
(ajax_load json_request() )， 用 于 执行 Ajax 异步 解析 JSON 文件 的 操作 。 
@ 第 15 行 代码 通过 <div id="id-div-ajax-txt"> 标 签 元 素 定 义 了 一 个 层 区 域 ， 用 于 显示 通过 Ajax 
异步 方式 解析 JSON 文件 所 获取 的 文本 内 容 。 
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e@ 第 16 行 代码 通过 <div id="id-div-ajax-json"> 标 签 元 素 定义 了 另 一 个 层 区 域 ,用 于 显示 通过 Ajax 
异步 方式 解析 JSON 文件 后 将 所 获取 的 数据 填充 到 一 个 动态 生成 的 表格 中 。 
第 20 行 代码 定义 了 一 个 XMLHttpRequest 对 象 实例 (xhr )， 并 初始 化 为 null。 
第 21~ 36 行 代码 是 ajax_load json_ request() 方 法 的 实现 过 程 ， 具 体内 容 如 下 : 
> 第 22~28 行 代码 用 于 创建 XMLHttpRequest 对 象 实例 ( 见 【 代 码 11-1])。 
> 第 29~35 行 代码 用 于 执行 Ajax 异步 请 求 操作 ( 见 【 代 码 11-2〗)。 其 中 ， 第 30 行 代码 定 
义 了 回调 方法 ( on_state_change() ), 第 31 行 代码 调用 的 open() 方 法 定义 了 异步 请 求 的 JSON 
文件 路 径 ， 为 本 地 的 文本 文件 ("ajax.json" )。 
@ 第 37~45 行 代码 是 on_state_change() 回 调 方法 的 实现 过 程 (参考 【代码 11-3〗)， 需 要 介绍 的 
内 容 如 下 : 
> 第 40 行 代码 通过 XMLHttpRequest 对 象 的 responseText 属性 获取 了 解析 JSON 文件 
("ajax.json" ) 中 的 内 容 ， 并 以 文本 形式 保存 在 变量 jsonDoc 中 ， 然 后 在 第 41 行 代码 中 通 
过 层 ( <div id="id-div-ajax-txt"> ) 元 素 进行 显示 。 
> 第 42 行 代码 通过 JSON 对 象 的 parse() 方 法 ( 将 文本 转化 为 JSON 对 象 格式 ) 将 变量 jsonDoc 
解析 为 JSON 对 象 (变量 jsonObj )。 
> 第 43 行 代码 通过 变量 jsonObj 获取 了 JSON 文件 ("ajaxjson" ) 中 定义 的 web 数组 ， 并 保 
存在 变量 jsonWeb 中 。 这 里 需要 强调 的 是 ，JSON 对 象 数据 格式 就 是 直接 通过 键 名 来 获取 
键 值 的 (区 别 于 XML 格式 )。 
> 第 45~72 行 代码 通过 变量 jsonWeb 直接 操作 键 名 获取 键 值 ， 然 后 填充 进 一 个 动态 生成 的 
表格 中 ， 并 通过 层 (<div id="id-div-ajax-json"> ) 元 素 进行 显示 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 11.4 和 图 11.5 所 示 。 
如 图 11.4 所 示 ， 页 面 中 显示 了 通过 Ajax 异步 方式 解析 JSON 文件 ("ajax.json"〉 所 得 到 的 文 
本 内 容 ， 注 意 JSON 格式 与 XML 格式 的 区 别 〈 更 加 简洁 了 ) 


著 Javascript 全 程 实例 x Be - DO x 


GG © localhost:63342/ v 收回 全 » 三 


JavaScript Ajax 应 用 - 解析 JSON 数 据 | “人 javascript 全 得 实例 x EE 
CG © localhost:63342 加 全 | 为 三 


Javascript Ajax 应 用 - 解析 JSON 数 据 
人 


‘web":[ 


tavasgripk, 
address": “http//Wwwwjscode.com”, 
to's JavaSchpt Code seaments 


} 
title”: JQue 


“address" /per wwwjqcode.com", 
Hinto': jQuery Code Segments Title Pe nfo 
i La Javascript| http//wwwjscode.com | JavaScript Code Segments 
es “httpy/www.ajaxcode. com", jQuery | http//wwwjqcode com |jQuery Code Segments 
:Ajax Code Segments” 
Aiax http//www.ajaxcode.com | Ajax Code Segments 


| 
} 


11.4 Ajax 实现 解析 JSON 文件 (文本 方式 ) 11.5 Ajax 实现 解析 JSON 文件 (JSON 方式 ) 
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如 图 11.5 所 示 ， 页 面 中 显示 了 通过 Ajax 异步 方式 解析 JSON 文件 〈"ajax.json") 并 将 返回 的 
数据 填充 进 一 个 动态 生成 的 表格 中 的 效果 。 


11.6 ”实现 一 个 Ajax 框架 


前 文中 陆续 介绍 了 通过 Ajax 解析 文本 文件 .XML 文件 和 JSON 格式 文件 的 方法 , 细心 的 读者 
一 定 会 发 现 创建 Ajax 应 用 的 代码 基本 都 有 固定 的 流程 和 模式 。 设 计 人 员 可 以 通过 编写 Ajax 框架 来 
构建 模块 化 的 开发 流程 ， 进 而 提高 代码 的 使 用 效率 。 目 前 ， 主 流 的 JavaScript 框架 (如 具有 代表 性 
的 jQuery 框架 ) 均 实现 了 Ajax 模块 化 功能 ， 以 便于 设计 人 员 使 用 Ajax 功能 。 

在 本 节 中 ， 我 们 就 自己 设计 一 个 非常 简单 的 Ajax 框架 ， 让 读者 大 致 了 解 一 下 开发 框架 的 基本 
流程 。 下 面 看 一 下 具体 的 JavaScript 代码 实例 。 


【代码 11-6】( 详 见 源 代码 目录 ch11-js-ajax-myframework.html 文件 ) 


01 <script type="text/javascript"> 

02 J 

03 * my ajax framework 

04 和 攻 并 

05 function myAjaxFramework (options) { 

06 var resType; // TODO: define file type 

07 if (!options || !options.url) { // TODO: 检测 是 否 存 在 请 求 的 URL 

08 return false; 

09 : 

10 if (/txt/.test(options.url)) { 

4 resType = "text"; 

了 之 } else if (/xml/.test(options.url)) { 

13 resType = "xml"; 

14 } else if (/json/.test(options.url)) { 

resType = "json"; 

16 olse 

7 resType = ""; 

18 } 

19 A 

20 * 数据 初始 化 

21 闪 浊 

22 options.data = options.data || ""; // TODO: 待 传送 的 值 

23 options .method = (options.method || "GET") .toUpperCase(); 
// TODO: 默 认 是 GET 

24 options.async = options.async || true; 
// TODO: 异步 (true) 或 同步 (false) 
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25 


26 


迷 风 


28 
29 
30 
3 


32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 


44 
45 
46 
47 
48 
49 
50 
51 
52 


53 
54 
55 
56 
57 
58 
59 
60 
61 


options.responseType = options.responseType || resType; 
// TODO: response type 


options.successCall = options.successCall || false; 
// TODO: 成 功 回调 
options.failureCall = options.failureCall || false; 


// TODO: 失败 回调 
// TODO: define XMLHttpRequest 
Var xhr; 
// TODO: create XMLHttpRequest 
if (window.XMLHttpRequest) { // TODO: Chrome, Firefox, Opera, 
IE7+, Edge, etc. 
xhr = new XMLHttpRequest (); 


} else if (window.ActiveXObject) { // TODO: IES5, IE6 
xhr = new ActiveXObject ("Microsoft .XMLHTTP"); 
} else { 


xhr = null; 
} 
if (xhr != null) { 
xhr .onreadystatechange = function () { 
if (xhr.readyState == 4) { 
if (xhr.status == 200) { 
if (options.successCall) { 
options.successCall (getResponseData (xhr, 
options.responseType)); 
} 
} else { 
if (options.failureCall) { 
options.failureCall (xhr, xhr.status); 


] 7 
xhr .open (opPtions .method,options.url+ (options .method== 
"GET"? "2"+options.data:""),options.async); 
if (options .method != "GET" && options.data) { 
xhr.send (options.data); 
yelse 1 
xhr.send(); 
} 
Felse t 
console.log("Your browser does not support XMLHTTP."); 
} 
return true; // TODO: myAjaxFramework 调用 成 功 
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76 


1 


function getResponseData(xhr, resType) { 


77 </script> 


* get response data 
sa 


if (resType === "text") { 

return {resType: resType, resData: xhr.responseText}; 
} else if (resType === "xml") { 

return {resType: resType, resData: xhr.responseXML}; 
} else if (resType === "json") { 

return {resType: resType, resData: 

JSON .parse (xhr.responseText)}; 

} else { 


return 


}; 
EF 


关于 【代码 11-6】 的 说 明 : 
@ 第 05~62 行 代码 是 我 们 定义 的 Ajax 框架 (myAjaxFramework ) 的 实现 过 程 ， 具 体内 容 如 下 : 


> 


> 


第 05 行 代码 以 函数 方式 (function ) 定义 了 Ajax 框架 ( myAjaxFramework )， 同 时 定义 了 

一 个 参数 (options )， 用 来 传递 Ajax 相关 属性 。 

第 06 行 代码 定义 了 一 个 变量 (resType ), 用 来 保存 异步 加 载 文件 的 类 型 (文本 TXT、XML 

或 JSON )。 

第 10~18 行 代码 借助 正则 表达 式 的 方式 来 获取 异步 加 载 文件 的 类 型 (TEXT、XML 或 

JSON )， 并 保存 在 变量 (resType ) 中 。 

第 22~27 行 代码 用 于 初始 化 参数 ( options ), 包括 异步 传输 的 数据 (data)、 请 求 方式 (GET 

或 POST )、 文 件 类 型 ( resType )、 成 功 回 调 方法 ( successCall ) 和 失败 回调 方法 
(failureCall ) 等 。 

第 29~37 行 代码 定义 并 创建 了 XMLHttpRequest 对 象 实例 (xhr )。 

第 38~60 行 代码 用 于 执行 Ajax 异步 请 求 操作 。 关 键 代码 包括 : 第 43 行 代码 调用 了 成 功 

回调 方法 (successCall ), 并 通过 自 定义 方法 ( getResponseData() ) 获取 了 异步 返回 的 数据 ; 

第 52 行 代码 调用 的 open() 方 法 打开 异步 请 求 的 文件 ; 第 53 ~57 行 代码 用 于 判断 请 求 类 型 
(GET 或 POST )， 并 调用 send() 方 法 执行 异步 请 求 的 操作 。 


@ 第 66~76 行 代码 是 自 定 义 getResponseData() 方 法 的 实现 过 程 , 主要 是 根据 异步 请 求 文件 的 类 
型 来 获取 异步 请 求 的 返回 数据 (responseText 或 responseXML )。 
以 上 就 是 我 们 实现 的 一 个 非常 简单 的 Ajax 框架 (myAjaxFramework) 的 过 程 ， 这 个 框架 主要 
用 来 自动 区 分 文件 类 型 并 实现 异步 加 载 功 能 。 
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11.7 ”使 用 Ajax 框架 轻松 加 载 文件 


在 本 节 中 ， 我 们 将 在 刚刚 完成 的 Ajax 框架 (myAjaxFramework) 的 基础 上 实现 轻松 异步 加 载 
文件 的 操作 。 下 面 看 一 下 具体 的 JavaScript 代码 实例 。 


【代码 11-7】( 详 见 ) ax-load-files.html 文件 ) 


001 <!doctype htm1> 
002 <html lang="en"> 


003 <head> 
004 <!-- 添加 文档 头 部 内 容 --> 

005 <title>JavaScript 全 程 实例 </title> 
006 </head> 

007 <body> 


008 <!-- 添加 文档 主体 内 容 --> 

009 <header> 

010 <nav>JavaScript Ajax 应 用 - 使 用 Ajax 轻松 加 载 文件 </nav> 

011 </header> 

012 <!-- 添加 文档 主体 内 容 --> 

013 <div id="id-div-ajax" style=""> 

014 <input type="button" onclick="on my ajax();" 
value=" 通 过 Ajax 框架 加 载 文件 "/> 

015 <div> 解 析 文 件 内 容 :</div> 

016 <div id="id-div-ajax-response"></div> 

017 </div> 

018 </body> 

019 <script type="text/javascript"> 


020 De 

021 * my ajax framework 

022 起 风 

023 function myAjaxFramework (options) { 

024 var resType; // TODO: define file type 
025 if (!options || !options.url) { // ToDO: 检测 是 否 存在 请 求 的 URL 
026 return false; 

027 } 

028 if (/txt/ .test (options.url)) { 

029 resType = "text"; 

030 } else if (/xml/.test(options.url)) { 
031 resType = "xml"; 


032 } else if (/json/.test(options.url)) { 
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033 resType = "json"; 
034 } else { 
035 resType = ""; 
036 
037 We 
038 * 数据 初始 化 
039 i 
040 options.data = options.data || ""; // TODO: 待 传送 的 值 
041 options .method = (options.method || "GET") .toUpperCase(); 
// TODO: 默 认 是 GET 
042 options.async = options.async || true; 
// TODO: 异步 (true) 或 同步 (false) 
043 options.responseType = options.responseType || resType; 
// TODO:response type 
044 options.successCall = options.successCall || false; 
// TODO: 成 功 回调 
045 options .failureCall = options.failureCall || false; 
// TODO: 失败 回调 
046 // TODO: define XMLHttpRequest 
047 Var xhr; 
048 // TODO: create XMLHttpRequest 
049 if (window.XMLHttpRequest) { // TODO: Chrome, Firefox, Opera, 
IE7+, Edge, etc. 
050 xhr = new XMLHttpRequest (); 
051 } else if (window.ActiveXObject) { // TODO: IE5, IE6 
052 xhr = new ActiveXObject ("Microsoft .XMLHTTP"); 
053 } else if 
054 xhr = null; 
055 } 
056 if (xhr != null) { 
057 xhr.onreadystatechange = function () { 
058 if (xhr.readyState == 4) { 
059 if (xhr.status == 200) { 
060 if (options.successCall) { 
061 options.successCall (getResponseData (xhr, options.url, 
options.responseType)); 
062 } 
063 } else { 
064 if (options.failureCall) { 
065 options.failureCall (xhr, xhr.status); 


066 
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067 
068 
069 
070 


071 
072 
073 
074 
075 
076 
077 
078 
079 
080 
081 
082 
083 
084 
085 
086 
087 


088 
089 


090 
091 


092 
093 
094 
095 
096 
097 
098 
099 
100 
OL 
102 
103 


}; 


xhr .open (options.method, options.url + (options.method == "GET" ? "?" 
+ options.data : ""), options.async); 
if (options.method != "GET" && options.data) { 


xhr.send (options.data); 
} else { 
xhr.send(); 
} 
} else { 


console.log("Your browser does not support XMLHTTP."); 


return true; // TODO: myAjaxFramework 调用 成 功 
} 
/** 
* get response data 
uh 
function getResponseData (xhr, resUrl, resType) { 
if (resType === "text") { 
return {resType: resType, resUrl: resUrl, resData: 
xhr.responseText}; 
} else if (resType === "xml") { 
return {resType: resType, resUrl: resUrl, resData: 
xhr.responseXML}; 


} else if (resType "Son 

return {resType: resType, resUrl: resUrl, resData: 
JSON .parse (xhr .responseText)}; 

} else { 


return {}; 


. 
/x 
* on my ajax 
A 
function on my ajax() { 
/** 
* call myAjaxFramework 
4 
myAjaxFramework ({ 
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104 // TODO: 定义 url 
105 i 
106 // TODO: 成 功 回调 
107 "successCall": function (resObj) { 
108 loadFiles (resObj); 
109 }, 
110 // TODO: 失败 回调 
hb "failureCall": function (xmlRes, resCode) 
1 be console.log (resCode); 
生生 分 } 
114 3 
115 We 
116 * Call myAjaxFramework 
3 二 
118 myAjaxFramework ({ 
119 // TODO: 定义 url 
120 wl 定 和 村 有 EXE 
120 // TODO: 成 功 回 调 
122 "successCall": function (resobj) { 
123 loadFiles (resObj); 
124 }, 
125 // TODO: 失败 回调 
126 "failureCall": function (xmlRes, resCode) 
By console.log (resCode); 
128 | 
129 A 
130 hs 
3 * call myAjaxFramework 
132 s/ 
和 myAjaxFramework ({ 
134 // TODO: 定义 url 
35 warl" majaxs jaon™r 
136 // TODO: 成 功 回 调 
7 "successCall": function (resObj) { 
138 loadFiles (resObj); 
3 } 
140 // ToDpo: 失败 回调 
141 "failureCall": function (xmlRes, resCode) 
142 console.log (resCode); 
143 } 
144 ]) 7 


第 11 章 Ajax 应 用 | 257 


146 
147 
148 
149 
150 
155 
152 
153 
154 
155 
156 


| 
158 
159 
160 


161 


162 
163 
164 
165 
166 
167 
168 
169 


170 
7 
4 
73 
174 
175 
176 
177 


178 
79 
180 
181 
182 


/x** 


* load files 


* @param resObj 


区 四 


function loadFiles (resobj) { 


Var vUrl, vData; 


Switch (resObj.resType) { 


Case "text": 


vUrl = "异步 加 载 文本 文件 : " + resObj.resUrl + "<br>"; 
VData = resObj.resData + "<br><br>"; 


document .getElementById ("id-div-ajax-response"). 


innerHTML += VUr1 + vData; 


break; 


Case "xml": 


vUrl = "异步 加 载 XML 文件 : " + resObj.resUrl + "<br>"; 


var x = resObj.resData.documentElement. 


var vData 


getElementsByTagName ("WEB"); 
= "<table border='1'><tr><th>Title</th><th>Address</th> 
<th>Info</th></tr>"; 
var len = x.length; 
Var xx = " "7 
for (let i = 0; i < len; i++) { 
VData += "<tr>"; 
xx = xX[i] .getElementsByTagName ('TITLE'); 
{ 
try { 
VData += "<td>" + xx[0] .firstChild.nodeValue + 
WT A: 
} catch (er) { 
vData += "<td> </td>"7 


xx = x[i] .getElementsByTagName ('ADDRESS'); 


try { 
VData += "<td>" + xx[0] .firstChild.nodeValue + 
n/ta>", 
} catch (er) { 
VData += "<td> </td>"; 


xx = x[i] .getElementsByTagName ('INFO'); 
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183 于 
184 try 
185 VData += "<td>" + xx[0].firstChild.nodeValue + 
“</td> 
186 } catch (er) { 
187 vData += "<td> </td>"; 
188 } 
189 } 
190 vData += "</tr>"; 
191 } 
于 9 之 vData += "</table>"; 
93 VData += "<br><br>"; 
194 document .getElementById("id-div-ajax-response") .innerHTML += 
vUrl + vData; 
195 break; 
196 case "json": 
下 397 vUrl = "异步 加 载 JSON 文件 : " + resObj.resUrl + "<br>"; 
198 var jsonObj = resObj.resData; 
199 //var jsonStringify = JSON.stringify(jsonDoc); 
200 Var jsonWeb = jsonObj .web; 
201 var len = jsonWeb.length; 
202 var vData = "<table border='1'><tr><th>Title</th><th>Address</th> 
<th>Info</th></tr>"; 
203 for (let i = 0; i < len; i++) { 
204 VData += "<tr>"; 
205 { 
206 Cel 
207 vData += "<td>" + jsonWeb[i].title + "</td>"; 
208 } catch (err) { 
209 vData += "<td> </td>"; 
210 
211 } 
212 
2 Er 
214 vData += "<td>" + jsonWeb[i] .address + "</td>"; 
215 } catch (err) { 
216 vData += "<td> </td>"; 
了 下 了 下 
218 } 
219 € 
220 try { 
21 VData += "<td>" + jsonWeb[i].info + "</td>"; 
222 } catch (err) { 
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223 
224 
225 
226 
227 
228 
229 
230 


这 3 
232 
233 
234 
235 
236 
2373 


VData += "<td> </td>"7 


vData HE <XEE>we7 
| 
VData += "</table>"; 
VData += "<br><br>"; 
document .getElementById("id-div-ajax-response") .innerHTML += 
VUrl + VData7 
break; 
default: 


break; 


下 
</script> 
</html> 


关于 【代码 11-7】 的 说 明 : 


【代码 11-7】 是 在 【代码 11-6】( myAjaxFramework 框架 ) 【代码 11-3】( 异步 加 载 文本 文件 入 
【代码 11-4】( 异步 加 载 XML 文件 ) 和 【代码 11-5】〗( 异步 加 载 JSON 文件 ) 的 基础 上 改进 
而 成 的 。 
自 定义 方法 getResponseData(0) 略 做 了 修改 ， 增 加 了 一 个 文件 路 径 参 数 ， 可 以 获取 异步 加 载 文 
件 的 路 径 。 
自 定义 方法 loadFiles() 整 合 了 【代码 11-3】( 异步 加 载 文本 文件 )【 代 码 11-4】( 异步 加 载 XML 
文件 ) 和 【代码 11-5】 异步 加 载 JSON 文件 ) 的 代码 , 实现 了 将 异步 加 载 的 XML 文件 和 JSON 
文件 内 容 转 化 为 表格 形式 的 功能 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 11.6 所 示 。 


贺 javascript 全 入 实例 x | 十 
CQ 会 © localhost63342/js-total 下 回合 | 


JavaScript Ajax 应 用 - 使 用 Ajax 轻松 加 载 文件 


通过 Ajax 框 架 加 载 文件 AN 


解析 文件 内 容 : 


图 11.6 Ajax 框架 轻松 加 载 文 件 (初始 状态 ) 


如 图 11.6 中 的 箭头 所 示 ， 在 页 面 中 单 击 “ 通 过 Ajax 框架 加 载 文件 ”按钮 ， 文 件 异步 加 载 的 效 
果 如 图 11.7 所 示 。 
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图 ,avascript 全 查实 全 x Bb = 口 


> CQ 会 © localhost:63342/js-total- 回合 


JavaScript Ajax 应 用 - 使 用 Ajax 轻松 加 载 文 件 


wae 
Hello oA Te Wn Ga 
异步 加 载 XML 文件 : sem 


Title Address 
JavaScript | http//wwwjscode.com | JavaScript Code Segments 


jQuery |http//wwwjacode.com |jQuery Code Segments 
Ajax |httpy//wwwajaxcode.com | Ajax Code 


异步 加 载 JSON 文 件 : ajaxjson 


Title Address 
JavaScript | http://wwwjscode.com ee 
jQuery | httpy/wwwjqcodecom |jQuery Code Segments 
Ajax http://www.ajaxcode.com | Ajax Code Segments 


11.7 ”Ajax 框架 轻松 加 载 文件 〈 加 载 完成 7 


如 图 11.7 中 的 标识 所 示 ， 页 面 中 显示 了 通过 Ajax 异步 方式 加 载 文本 文件 (ajax.txt) 、XML 
文件 (ajax.xml) 和 JSON 文件 〈"ajax.json") 的 效果 。 


11.8 Ajax 跨 域 异步 交互 


Ajax 技术 真正 发 挥 作用 的 地 方 是 能 够 实现 跨 域 与 服务 器 进行 异步 数据 交互 功能 。Ajax 技术 的 
优势 还 体现 在 数据 加 载 过 程 中 不 会 重新 加 载 整个 页 面 、 仅仅 是 局 部 刷新 网 页 内 容 , 显著 增强 了 网 页 


浏览 的 用 户 体验 效果 。 下 面 看 一 个 通过 Ajax 实现 跨 域 异步 交互 (PHP 服务 器 ) 的 JavaScript 代码 
实例 。 


【代码 11-8】( 详 见 源 代码 目录 ch11-js-ajax-php.html 文件 ) 


01 <!doctype html> 
02 <html lang="en"> 


03 <head> 
04 <!-- 添加 文档 头 部 内 容 --> 
05 <title>JavaScript 全 程 实例 </title> 


06 </head> 
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07 
08 
09 
10 
11 
12 
13 
14 


5 
16 
1 
18 
19 
20 
21 
22 
23 
24 
ee 


26 
27 
28 
29 
30 
3. 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 


<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript Ajax 应 用 - Ajax 跨 域 异步 交互 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 


<div id="id-div-ajax" style=""> 


<input type="button" onclick="ajax load php request ();" 
value=" 通 过 Ajax 解析 PHP"/> 
<div> 解 析 PHP 文件 :</div> 
<div id="id-div-ajax-php"></div> 
</div> 
</body> 
<script type="text/javascript"> 


var xhr = null; // TODO: define XMLHttpRequest Object 
/** 
* request php file by Ajax 
区 
function ajax load php request() { 
if (window.XMLHttpRequest) { // TODO: Chrome, Firefox, Opera, 
IE7+, Edge, etc. 
xhr = new XMLHttpRequest (); 
} else if (window.ActiveXObject) { // TODO: IE5, IE6 
xhr = new ActiveXObject ("Microsoft .XMLHTTP"); 
} else { 
xhr = null; 
if (xhr != null) { 
xhr.onreadystatechange = on state change; 
xhr.open ("GET", "ajax.php", true); 
xhr.send (null); 
yelse { 
console.log("Your browser does not support XMLHTTP."); 


上 
Ar 
* callback func 
function on_state_change () { 
Var resText, iPos, vData, resJson, jsonObj, iLen; 
if (xhr.readyState == 4) { 
if (xhr.status == 200) { 
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47 resText = xhr.responseText; 
48 iPos = resText.indexOf ('!'); 
49 vData = resText.substr(0, iPos + 1); 
50 resJson = resText.substr (iPos + 1); 
5 if(resJson.indexOf('{') > -1) { 
Ee jsonObj = JSON.parse (resJson); 
53 iLen = jsonObj.length; 
54 VData += "<table border='1'><tr><th>Title</th><th>Address</th> 
<th>Info</th></tr>"; 

55 for (let i = 0; i < iLen; i++) { 
56 VData += "<tr>"; 
5 
58 try { 
59 VData += "<td>" + jsonObj[il].title + "</td>"; 
60 } catch (err) { 
61 VData += "<td> </td>"; 
62 
63 } 
64 { 
65 try { 
66 vData += "<td>" + jsonObj [i] .address + "</td>"; 
67 } catch (err) { 
68 vData += "<td> </td>"; 
69 } 
70 } 
gi { 
72 try { 
73 vData += "<td>" + jsonObj [i].info + "</td>"; 
74 } catch (err) { 
75 vData += "<td> </td>"; 
76 
oh } 
78 vData += "</tr>"; 
29 } 
80 vData += "</table>"; 
81 document .getElementById('id-div-ajax-php'). 

innerHTML = vData; 
82 } else { 
83 document .getElementById('id-div-ajax-php'). 

innerText = resText; 
84 } 
85 } else { 
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86 console.log("Problem retrieving data:" + xhr.statusText); 
87 } 

88 } 

89 } 

90 </script> 

91 </html> 


关于 【代码 11-8】 的 说 明 : 

@ 【代码 11-8】〗 与 前 面 的 代码 实例 不 同 ， 异 步 交 互 的 是 PHP 服务 器 端的 文件 (第 34 行 代码 定 
义 的 ajax.php 文件 ). 服务 器 端 文件 的 运行 与 本 地 文件 不 同 ， 网 页 需要 在 搭建 的 服务 器 上 运行 
才 可 以 得 到 正确 的 结果 。 


下 面 将 PHP 文件 的 代码 简单 介绍 一 下 。 


【代码 11-9】( 详 见 源 代码 目录 ajax.php 文件 ) 


01 <?php 

02 echo "Hello, this is from server php file by ajax!"; 
03 S$webArr = array( 

04 array ("title"=>"JavaScript", 

05 "address"=>"http://www.jscode.com", 
06 "info"=>"JavaScript Code Segments"), 
07 array ("title"=>"jQuery", 

08 "address"=>"http://www.jqcode.com", 
09 "info"=>"jQuery Code Segments"), 

10 array ("title"=>"Ajax", 
"address"=>"http://www.ajax.com", 

i "info"=>"Ajax Code Segments") 

3 

14 echo json encode($webArr); // 将 数组 进行 json 编码 
je 


关于 【代码 11-9】 的 说 明 : 

@ 第 02 行 代码 通过 echo 语 句 回 写 一 行文 本 。 

@ 第 03~13 行 代码 定义 了 一 个 二 维 数组 (webArr), 第 14 行 代码 通过 json_encode() 语 句 将 二 维 
数组 (webArr ) 进行 JSON 格式 编码 ， 并 通过 echo 语句 回 写 。 

@ 这 样 ，PHP 文件 就 同时 将 一 行 字符 串 文 本 和 一 个 JSON 对 象 回 写 ， 交 由 Ajax 进行 异步 处 理 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 11.8 所 示 。 在 无 服务 器 的 环 
境 下 会 直接 将 PHP 文件 (ajax.php) 解析 为 文本 进行 显示 。 读 者 可 以 注意 到 ， 解 析 得 到 的 文本 是 全 
部 PHP 代码 。 

在 PHP 服务 器 的 环境 下 运行 ， 页 面 的 效果 如 图 11.9 所 示 ， 得 到 了 解析 的 字符 串 文本 以 及 将 
JSON 对 象 转化 为 表格 形式 显示 的 效果 。 
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JavaScript 全 程 实例 “| 国 Javascript 全 xX | 十 


We: 口 x 


忆 CC © localhost63342/js-tot 回合» 


JavaScript Ajax 应 用 - Ajax 跨 域 异步 交互 


解析 PHP 文 件 : 


<?php 
echo “Hello, this is from server php file by ajax 
S$webArr = array( 
array(“title"=>"JavaScript”, 
address"=>"http://wwwjscode.com", “info"=>"JavaScript 
Code Segments”), 


array("title"=> "jQuery ， 
“address"=>"http://wwwjqcode.com", "info"=>"jQuery 
Code segments"), 
arrayf"title"=>"Ajax", "address": he ajaxcom"， 
“info"=>"Ajax Code Segments" 


» 
echo json_encode($webAr); // 将 数组 进行 json 编 码 


?> 


图 11.8 Ajax 跨 域 异步 交互 (无 服务 器 环境 ) 


Javascript 全程 X | 国 JavaScript 全 程 2 十 


= 口 


加 个 | 少 


€)3 £ CO © localhost90901s-totai 


JavaScript Ajax 应 用 - Ajax 跨 域 异步 交互 


Hello, this is from server php file by ajax! 
Title Address Info 


JavaScript Code Segments | 
httpy/wwwjqcodecom| jQuery Code Segments | 


Ajax Code Segments | 


htpy/wwwjscode com 


httpy/wwwajaxcom 


图 11.9 Ajax 跨 域 异步 交互 (PHP 服务 器 环境 ) 


第 12 章 React 开发 


为 了 帮助 读者 开阔 思路 和 增长 见识 ， 本 章 将 详细 介绍 一 下 如 今 在 Web 前 端 开发 领域 非常 火爆 
的 React 框架 ， 具体 内 容 涵盖 了 React 框架 的 基础 、 使 用 入 门 以 及 Web 前 端 应 用 开发 ， 目 的 是 让 读 
者 了 解 一 下 先进 的 Web 前 端 开发 技术 的 发 展 趋势 。 


12.1 ” React 概述 


对 于 大 多 数 读 者 而 言 ，React 会 感觉 很 陌生 (可 能 不 如 jQuery 那么 耳熟能详 ) 。 其 实 ，React 
是 大 有 来 头 的 , 最 初 是 社交 网 站 巨头 Facebook 公司 的 一 个 内 部 项 目 , 是 用 来 架构 Instagram 网 站 的 。 

现在 感觉 有 点 意思 了 吧 ! Instagram 网 站 就 是 在 移动 端 中 非常 有 名 的 、 用 于 图 片 分 享 的 社交 应 
用 ， 可 以 将 用 户 随时 随地 抓拍 的 图 片 在 移动 终端 设备 〈 手 机、 平板 电脑 等 ) 上 彼此 分 享 。Instagram 
网 站 最 初 也 是 一 家 独立 公司 ， 于 2012 年 被 Facebook 公司 收购 。 

如 同 大 多 数 的 前 端 开发 框架 一 样 ，React 最 初 的 开发 者 也 是 不 满意 市 面 上 已 有 的 产品 ， 所 以 决 
定 自 己 搞 一 套 出 来 打败 前 辈 。React 的 设计 思想 很 独特 、 视 角 很 新 奇 ， 应 该 说 是 有 革命 性 的 一 类 。 
总 体 而 言 ，React 在 性 能 上 很 出 众 ， 而 代码 逻辑 却 又 非常 简单 ， 所 以 有 越 来 越 多 的 开发 人 员 开 始 关 
注 并 使 用 该 框架 。 

从 本 质 上 讲 ，React 框架 主要 用 于 构建 前 端 UI， 其 核心 思想 就 是 封装 组 件 。 各 个 组 件 维护 自身 
的 状态 和 UI， 每 当 状态 变更 时 都 会 自动 重新 泻 染 整个 组 件 ， 而 不 需要 反复 查找 DOM 元 素 后 青 重 
新 泻 染 更 改 整个 组 件 了 。 

下 面 简 单 概括 一 下 React 框架 的 主要 特点 (参考 官方 文档 及 网 络 资源 ) : 

(1) 声明 式 设计 : React 采用 声明 范式 ， 可 以 轻松 描述 应 用 。 

(2) 高 效 : React 通过 对 DOM 的 模拟 ， 最 大 限度 地 减少 与 DOM 的 交互 。 

(3) 灵活 : React 可 以 与 己 知 的 库 或 框架 很 好 地 配合 。 


(5) 组 件 复 用 : 通过 React 构建 组 件 ， 使 得 代码 易于 复 用 ， 可 在 大 型 项 目 应 用 开发 中 发 挥 
优势 。 

(6) 单 向 响应 的 数据 流 : React 实现 了 单 向 响应 的 数据 流 ， 减 少 了 重复 代码 ， 比 传统 数据 绑 
定 方式 更 简单 。 


通过 React 框架 可 以 设计 出 功能 强大 的 Web 前 端 应 用 ， 后 续 将 为 读者 介绍 React 开发 的 相关 
知识 及 案例 。 


备注 : React 框架 官方 网 址 为 https://reactjs.org/。 
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12.2 第 一 个 React 应 用 


从 本 节 开 始 , 我 们 正式 介绍 如 何 使 用 React 框架 开发 Web 前 端 应 用 。React 应 用 开发 涉及 的 知 
识 面 比较 宽泛 ， 如 何 切 入 着 实 费 了 一 番 脑 筋 。 不 过 思 前 想 后 ， 还 是 觉得 第 一 个 React 应 用 从 基本 的 
“Hello World” 开 始 最 合适 。 所 谓 “ 万 变 不 离 其 宗 ”， 指 的 也 就 是 这 个 含义 吧 。 
首先 , 要 使 用 React 框架 就 要 先 安装 该 框架 。 好 在 React 框架 可 以 直接 通过 引用 的 方式 来 使 用 ， 
这 里 推荐 两 个 比较 好 的 CDN 地 址 。 


第 一 个 是 Staticfile CDN 的 React CDN 库 ， 具 体 如 下 : 


<script src="https://cdn.staticfile.org/react/16.4.0/umd/ 
react .development .js"></script> 


<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/ 
react-dom.development .js"></script> 


<!-- 生产 环境 中 不 建议 使 用 --> 
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/ 


babel .min.js"></script> 


第 二 个 是 官方 提供 的 CDN 库 ， 具 体 如 下 : 


<script src="https://unpkg.com/react@16/umd/react .development .js"></script> 
<script src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 


<!-- 生产 环境 中 不 建议 使 用 --> 


<script src="https://unpkg.com/babel-standalone@6.26.0/ 
babel .min.js"></script> 


在 如 上 的 两 个 CDN 库 中 ， 都 引用 了 react.min.js、react-dom.min.js 和 babel.min.js 这 三 个 库 文 
件 ， 具 体 描述 如 下 : 
react.min.js 是 React 框架 的 核心 库 。 
react-dom.min.js 提供 与 DOM 相关 的 功能 。 
babel.min.js 由 Babel 编译 器 提供 ， 可 以 将 ES6 代码 转 为 ES5 代码 ， 这 样 就 能 在 不 支持 ES6 
的 浏览 器 上 执行 React 代码 ( 注意 ， 在 生产 环境 中 不 建议 使 用 )。 


下 面 看 一 个 使 用 React 框架 实现 “Hello World” 应 用 的 代码 实例 。 


【代码 12-1】( 详 见 源 代码 目录 ch12-react-helloworld.html 文件 ) 


01 <!DOCTYPE html> 

02 <html> 

03 <head> 

04 <script src="https://unpkg.com/react@16/umd/react.development.js"> 


</script> 
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05 <script src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 

06 <!-- Don't use this in production: --> 

07 <script src="https://unpkg.com/babel-standalone@6.26.0/babel .min.js"> 

</script> 

08 <title>JavaScript 全 程 实例 </title> 

09 </head> 

10 <body> 


11 <!-- 添加 文档 主体 内 容 --> 

12 <header> 

3 <nav>JavaScript React 开发 - 第 一 个 React 应 用 </nav> 
14 </header> 

15 <div id="root"></div> 

16 <script type="text/babel"> 


a ReactDOM.render ( 

18 <hl>Hello，world!</hl>， 

19 document .getElementById('root') 
20 元 

21 </script> 

22 </body> 

23 </html> 


关于 【代码 12-1】 的 说 明 : 


@ 第 04 行 、 第 05 行 和 第 07 行 代 码 分 别 引 用 了 React 框架 所 需 的 三 个 库 文件 (react.min.js、 
react-dom.min.js 和 babel.min.js )。 

@ 第 15 行 代码 通过 <div id="root"> 标 签 元 素 定义 了 一 个 层 ， 用 于 显示 通过 React 框架 泻 染 的 文 
本 内 容 。 

@ 第 17~ 20 行 代码 通过 调用 React DOM 对 象 的 render() 方 法 来 泻 染 元 素 ， 具 体内 容 如 下 : 
> 第 18 行 代码 定义 了 要 引入 的 元 素 节点 <h1>。 
> 第 19 行 代码 获取 了 页 面 中 要 泻 染 的 元 素 节点 <div id="root">。 
> 通过 ReactDOMLrender() 方 法 将 <hl> 元 素 节 点 泻 染 到 页 面 的 层 <div id="root"> 元 素 节点 中 。 


上 面 的 第 17 一 20 行 代码 很 直观 ， 但 是 逻辑 性 不 太 强 ， 尝 试 将 其 代码 改写 成 如 下 形式 就 更 容易 
理解 了 。 


【代码 12-2】( 详 见 源 代码 目录 ch12-reactdom-renderhtml 文件 ) 


01 <script type="text/babel"> 


02 const hl = (<hl>Hello, world!</h1>); 
03 Var root = document .getElementById('root'); 
04 ReactDOM.render (hl, root); 


05 </script> 
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关于 【代码 12-2】 的 说 明 : 

@ 第 02 行 代码 通过 const 关键 字 定 义 了 一 个 常量 (hl )， 描 述 了 要 引入 的 元 素 节 点 <hl>。 由 此 
可 见 ， 在 React 框架 中 变量 的 使 用 非常 灵活 ， 可 以 将 元 素 节点 直接 定义 为 变量 形式 来 使 用 。 

@ 第 03 行 代码 获取 了 页 面 中 要 泻 染 的 元 素 节点 <div id="root">， 保 存在 变量 (root) 中 。 

@ 第 04 行 代码 调用 React DOM 对 象 的 render() 方 法 ， 将 hl 元 素 节 点 泻 染 到 root 元 素 节点 中 。 


下 面 可 以 分 别 使 用 Firefox 浏览 器 运行 测试 【代码 12-1】 和 【代码 12-2】 定 义 的 HTML 网 页 ， 
具体 效果 (一 致 的 ) 如 图 12.1 所 示 。 
你 Javascript 全 有 广 例 X 十 口 x 
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JavaScript React 开 发 - 第 一 个 React 应 用 


Hello, world! 


12.1 React 实现 “Hello World” 
如 图 12.1 所 示 ， 页 面 中 成 功 地 显示 了 通过 React 框架 泻 染 出 的 文本 内 容 (Hello, world!)。 


12.3 ”Rearct 泻 染 更 新 元 素 


一 般 ，React 元 素 都 是 不 可 变 的 ， 因 此 当 元 素 被 创建 之 后 是 无 法 改变 其 内 容 或 属性 的 。 如 果 打 
算 更 新 界面 元 素 ， 正 确 的 办 法 就 是 创建 一 个 新 的 元 素 对 象 ， 然 后 将 其 传 入 ReactDOM.render() 方 法 
中 来 泻 染 更 新 元 素 。 下 面 看 一 个 具体 的 代码 实例 。 


【代码 12-3】( 详 见 源 代码 目录 ch12-react-dom-render-update.html 文件 ) 


01 <div id="root"></div> 

02 <script type="text/babel"> 

03 

04 * update time 

05 ee 

06 function updateTime () { 

07 const helloworld = (<div> 

08 <hl>Hello, world!</h1> 

09 <h2> 现 在 时 间 是 {new Date() .toLocaleTimeString()}.</h2> 
10 </div>); 

Var root = document .getElementById('root'); 
2 ReactDOM.render (helloworld, root); 
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13 } 
14 // TODO: define timer 
15. setInterval (updateTime, 1000); 


16 </script> 


关于 【代码 12-3】 的 说 明 : 
@ 第 01 行 代码 通过 <div id="root"> 标 签 元 素 定义 了 一 个 层 ， 用 于 显示 通过 React 框架 泻 染 的 文 
本 内 容 。 
@ 第 06~13 行 代码 定义 了 一 个 自 定义 方法 updateTime()， 用 于 实现 通过 React 泻 染 更 新 元 素 ， 
具体 内 容 如 下 : 
> 第 07~10 行 代码 通过 const 关键 字 定 义 了 一 个 常量 (helloworld ), 描述 了 要 引入 的 容器 节 
点 <div>, 包括 一 个 <hl> 标 签 元 素 ( 用 于 定义 标题 ) 和 一 个 <h2> 标 签 元 素 (定义 标题 内 容 ) 
同时 ， 在 <h2> 标 签 元 素 内 使 用 花 括 号 定义 了 一 个 时 间 对 象 ， 用 于 获取 当前 时 间 。 
> 第 11 行 代码 获取 了 页 面 中 要 泻 染 的 元 素 节 点 <div id="root">， 保 存在 变量 (root) 中 。 
> 第 12 行 代码 调用 React DOM 对 象 的 render() 方 法 ,将 hl 元 素 节点 泻 染 到 root 元 素 节 点 中 。 
@ 第 15 行 代码 使 用 setInterval() 方 法 设置 了 一 个 计时 器 ， 通 过 调用 updateTime() 方 法 实现 定时 
(1000ms ) 泻 染 更 新 元 素 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 12.2 所 示 。 
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Javascript React 并 发 - 泻 染 更 新 元 素 


十 
xcdiv id="root"> 
v <div 
<hbHello, world!</hi> 


html > body > divsroot > div > h2 
团 _Rules layout Computed Changes Fonts Anima” 
12.2 ”React 实现 泻 染 更 新 元 素 


如 图 12.2 中 的 箭头 和 标识 所 示 ， 页 面 效果 显示 通过 React 演 染 方式 ， 仅 仅 只 更 新 时 间 元 素 
节点 。 
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12.4 React 虚拟 DOM 


React 的 核心 特性 之 一 ， 就 是 可 以 通过 创建 虚拟 DOM 来 避免 重复 过 多 的 操作 实际 DOM， 从 
而 实现 对 网 页 性 能 的 提升 。 相 信 读 者 都 知道 , HTML 网 页 的 骨架 是 由 各 类 DOM 元 素 构 成 的 。 但 是 ， 
React 中 定义 的 DOM 并 不 是 传统 概念 的 DOM, 而 是 React 用 来 在 浏览 器 中 创建 元 素 组 合 的 对 象 ( 理 
解 为 DOM 组 件 似 乎 更 直观 ) ， 因 此 设计 人 员 会 将 React DOM 称 为 虚拟 DOM。 

这 里 既然 说 到 了 虚拟 DOM， 我 们 就 先 将 其 与 实际 DOM 做 一 个 比较 ， 便 于 读者 更 好 地 理解 
React DOM。 说 来 也 巧 ， 在 HTML DOM 和 React DOM 中 均 定义 了 一 个 createElement() 方 法 ， 用 来 
创建 元 素 对 象 , 只 不 过 HTML DOM 中 的 createElement() 方 法 创建 的 是 一 个 实际 DOM 对 象 , 而 React 
DOM 中 的 createElement() 方 法 创建 的 是 一 个 虚拟 DOM。 为 了 区 别 这 个 同名 方法 ， 先 看 一 个 通过 
JavaScript 创建 实际 DOM 的 代码 实例 。 


【代码 12-4】( 详 见 源 代码 目录 ch12- js-createElement.html 文件 ) 


01 <!DOCTYPE html> 

02 <html> 

03 <head> 

04 <title>JavaScript 全 程 实例 </title> 
05 </head> 

06 <body> 

07 <!-- 添加 文档 主体 内 容 --> 

08 <header> 

09 <nav>JavaScript React 开发 - 创建 实际 DOM</nav> 
10 </header> 

11 <div id='id-div-react'></div> 

12 <script type="text/babel"> 


3 // TODO: get div 

14 var divReact = document .getElementById('id-div-react'); 
3 // TODO: JavaScript DOM 

16 const jsSpan = document.createElement ('span'); 

Ei const jsH3 = document.createElement ('h3°'); 

18 jsH3.innerText = "JavaScript DOM"; 

19 const jsP = document.createElement ('p'); 

20 jsP.innerText = "Create dom by JavaScript's createElement () func."; 
浊 王 jsSpan.appendchild(jsH3); 

他 之 jsSpan.appendCchild(jsP) 

| divReact .appendCchild(jsSpan) 7 

24 </script> 

25 </body> 


26 </html> 
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关于 【代码 12-4】 的 说 明 : 
@ 第 11 行 代码 通过 <div id-'id-div-react> 标 签 元 素 定义 了 一 个 层 ， 是 用 于 显示 通过 JavaScript 创 
建 实际 DOM 的 容器 。 
@ 第 16~23 行 代码 用 于 在 层 容器 <div id-'id-div-react> 中 创建 实际 DOM 节点 ， 具 体内 容 如 下 : 
> 第 16 行 代码 调用 Document 对 象 的 createElement() 方 法 ， 创 建 了 一 个 <span> 元 素 节点 。 
> 第 17~18 行 代码 调用 Document 对 象 的 createElement() 方 法 ， 创 建 了 一 个 <h3> 元 素 节点 ， 
并 定义 了 文本 内 容 。 
> 第 19~20 行 代码 再 次 调用 Document 对 象 的 createElement() 方 法 ， 创 建 了 一 个 <p> 元 素 节 
点 ， 同 样 定义 了 文本 内 容 。 
> 第 21 ~22 行 代 码 分 别 调用 appendChild() 方 法 将 <h3> 和 <p> 元 素 节点 填充 进 <span> 元 素 节 
点 内 。 
> 第 23 行 代码 再 次 调用 appendChild() 方 法 ， 将 <span> 元 素 节点 填充 进 层 容器 <div 
id='id-div-react> 内 ， 从 而 实现 创建 实际 DOM 的 操作 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 12.3 所 示 。 
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JavaScript React 开 发 - 创建 实际 DOM 


createElement 方 法 创建 


的 实际 DOM 节 点 


JavaScript DOM 


Create dom by JavaScript's createElement0 func. 


图 12.3 JavaScript 实现 创建 实际 DOM 
下 面 看 一 个 通过 React 创建 虚拟 DOM 的 代码 实例 。 


【代码 12-5】( 详 见 源 代码 目录 ch12-react-createElement.html 文件 ) 


01 
02 
03 
04 
05 
06 
07 


08 
09 
10 


<div id='id-div-react'></div> 
<script type="text/babel"> 
// TODO: get div 
var divReact = document .getElementById('id-div-react'); 
// TODO: React DOM 
const reactH3 = React.createElement ("h3", {}, "React DOM"); 
Const reactP = React.createElement ("p",{},"Create dom by React's 
createElement () func."); 
const reactSpan = React.createElement ("span", {}, reactH3, reactP); 
ReactDOM.render (reactSpan, divReact); 
</script> 
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关于 【代码 12-5】 的 说 明 : 
日 第 01 行 代码 通过 <div id-'id-div-react> 标 签 元 素 定义 了 一 个 层 ， 是 用 于 显示 通过 React 创建 庶 
拟 DOM 的 容器 。 
@ 第 06~09 行 代码 用 于 在 层 容 器 <div id='id-div-react> 中 创建 虚拟 DOM 节点 ， 具 体内 容 如 下 : 
> 第 06 行 和 第 07 行 代码 调用 React DOM 对 象 的 createElement() 方 法 分 别 创建 了 一 个 <h3> 
元 素 节点 (reactH3 ) 和 一 个 <p> 元 素 节 点 (reactP )， 并 相应 定义 了 文本 内 容 。 
> 第 08 行 代码 调用 React DOM 对 象 的 createElement() 方 法 ， 创 建 了 一 个 <span> 元 素 节点 
(reactSpan )， 然 后 将 刚刚 创建 的 <h3> 元 素 节点 ( reactH3 ) 和 <p> 元 素 节点 (reactP ) 填充 
进去 。 
> 第 09 行 代码 调用 React DOM 对 象 的 render() 方 法 ， 将 <span> 元 素 节点 (reactSpan ) 泻 染 
到 层 <div id='id-div-react> 容 器 中 进行 显示 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 12.4 所 示 。 
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JavaScript React 开 发 - 创建 虚拟 DOM 


Create dom by React's createElement() func. 


图 12.4 ”React 创建 虚拟 DOM 


如 图 12.4 中 的 箭头 和 标识 所 示 ， 页 面 中 显示 了 通过 React DOM 的 createElement() 方 法 泻 染 出 
来 的 虚拟 DOM。 读 者 可 以 与 图 12.3 中 通过 JavaScript 创建 的 实际 DOM 进行 对 比 ， 二 者 在 显示 效 
果 上 是 等 同 的 。 


12.5 “React JSX 初步 


在 12.4 节 中 , 我 们 介绍 了 如 何 通过 React DOM 的 createElement() 方 法 创建 虚拟 DOM, 并 将 创 
建 的 虚拟 DOM 演 染 到 页 面 中 的 过 程 。 但 是 ，Facebook 的 React 研发 团队 还 是 觉得 不 够 完美 ， 于 是 
就 开发 出 来 一 种 专属 React 的 JavaScript 语法 一 一 JSX。 

所 谓 JSX， 其 实 就 是 JavaScript XML 的 缩写 ， 直 译 过 来 就 是 基于 JavaScript 的 XML 。JSX 看 起 
来 似乎 是 一 种 XML 格式 ， 其 实 本 质 上 仍 是 JavaScript 语言 ， 只 不 过 是 将 js 脚本 书写 成 XML 格式 。 

JSX 作为 一 种 标记 语言 ， 支 持 自 定义 属性 ， 并 具有 可 扩展 性 。 同 时 ，JSX 基本 是 专用 于 React 
开发 的 ， 如 果 打 算 在 HTML 页 面 输 出 DOM 节点 和 内 容 ， 我 们 推荐 使 用 React 内 置 的 JSX 语法 来 
实现 。 
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另外 ， 如 果 要 在 React 中 使 用 JSX 语法 , 则 必须 引用 “babeljs” 文件 来 解析 JSX， 同时 <script> 
标签 中 必须 改 用 “type="text/babel" ”属性 。 原 因 在 于 使 用 “type="text/babel" ”属性 蔡 换 
“type="text/javascript"” 属 性, 浏览 器 内 置 的 JavaScript 解释 器 就 不 会 解析 里 边 的 代码 , 转 而 由 babel 
进行 解析 ， 从 而 避免 React 代码 与 原生 JavaScript 代码 发 生 混淆。 
介绍 了 这 么 多 的 概念 和 内 容 ， 下 面 让 我 们 先 看 一 下 JSX 的 庐山 真面目 吧 ! 其 实 ， 在 前 文 【 代 
码 12-1】 中 的 第 18 行 代码 就 已 经 使 用 了 JSX 语法 ， 具 体 如 下 : 


18 <hl>Hello, world!</h1>, 

这 里 的 <h1> 标 签 元 素 就 是 通过 JSX 方式 定义 的 ， 严 格 来 说 就 是 一 个 虚拟 DOM。 

为 了 详细 介绍 React JSX 的 使 用 方法 ， 下 面 先 看 一 个 将 前 文中 【代码 12-5】 改 写成 JSX 方式 
的 代码 实例 。 


【代码 12-6】( 详 见 源 代码 目录 ch12-react-jsx-intro.html 文件 ) 


01 <!DOCTYPE html> 


02 <html> 

03 <head> 

04 <script src="https://unpkg.com/react@16/umd/react.development .js"> 
</script> 

05 <script src="https://unpkg.com/react-dom@16/umd/r 
eact-dom.development .js"></script> 

06 <script src="https://unpkg.com/babel-standalone@6.26.0/babel .min.js"> 
</script> 

07 <title>JavaScript 全 程 实例 </title> 

08 </head> 

09 <body> 


10 <!-- 添加 文档 主体 内 容 --> 

11 <header> 

Wa <nav>JavaScript React 开发 - JSX 初步 </nav> 
13 </header> 

14 <div id='id-div-react'></div> 

15 <script type="text/babel"> 


16 // TODO: get div 

EW var divReact = document .getElementById('id-div-react'); 
18 // TODO: React JSX 

19 const reactSpan = ( 

20 <span> 

21 <h3>React </h3> 

轩 2 <p>Create HTML DOM by React JSX.</p> 

23 </span> 

24 上 

25 ReactDOM.render (reactSpan, divReact); 


26 </script> 
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27 </body> 
28 </html> 


关于 【代码 12-6】 的 说 明 : 
@ 在 第 15 行 代码 中 ，<script type="text/babel"> 标 签 内 使 用 了 JSX 语法 要 求 的 babel 属性 ， 这 一 
点 要 特别 提醒 读者 注意 一 下 。 
@ 第 19~24 行 定义 了 一 段 完整 的 JSX 代码 ， 实 现 了 一 个 虚拟 DOM 对象， 具体 内 容 如 下 : 
> 第 19~24 行 代码 通过 const 关键 字 定义 了 一 个 常量 (reactSpan )， 该 常量 使 用 小 括号 包含 
了 通过 <span>、<h3> 和 <p> 标 签 定义 的 元 素 组 合 。 
> 第 20~23 行 代码 定义 的 HTML 标签 符合 XML 格式， 而 常量 (reactSpan ) 的 定义 完全 符 
合 JavaScript 语法 ， 因 此 该 语法 被 称 为 JSX。 
@ 第 25 行 代码 调用 React DOM 对 象 的 render(0 方 法 ， 将 JSX 代码 泻 染 到 页 面 中 进行 显示 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 12.5 所 示 。 
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JavaScript React 开 发 - JSX 初 步 


React JSX 


Create HTML DOM by React JSX. 


图 12.5 ReactJSX 初步 


如 图 12.5 中 的 箭头 和 标识 所 示 , 页 面 中 显示 了 通过 React JSX 方式 泻 染 的 效果 , 与 【代码 12-5】 
实现 的 功能 是 一 致 的 。 其 实 ， 通 过 React JSX 方式 定义 的 虚拟 DOM 最 终 也 会 转换 为 通过 
createElement() 方 法 实现 的 DOM。 


12.6 在 JSX 中 使 用 JavaScript 表达 式 


既然 React JSX 本 质 上 使 用 的 就 是 JavaScript 语法 ， 那 么 自然 也 可 以 使 用 JavaScript 表达 式 。 
不 过 , 在 React JSX 中 使 用 JavaScript 表达 式 要 使 用 大 括号 “{ } ” 括 起 来 。 React JSX 中 的 JavaScript 
表达 式 形式 有 很 多 种 ， 我 们 先 看 一 个 最 简单 的 JavaScript 计算 表达 式 的 代码 实例 。 


【代码 12-7】( 详 见 源 代码 目录 ch12-react-jsx-cal-exp.html 文件 ) 


01 <div id='id-div-react'></div> 
02 <script type="text/babel"> 
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03 // TODO: get div 

04 Var divReact = document .getElementById('id-div-react'); 
05 // TODO: React JSX 

06 const reactSpan = ( 

07 <span> 

08 <h3>JSX - JavaScript Calculate Expression</h3> 
09 <p>Now calculate: 1 + 2 = {1+2}.</p> 

10 </span> 

I ua 

昌之 ReactDOM.render (reactSpan, divReact); 

Lo </aoript> 


关于 【代码 12-7】 的 说 明 : 


@ 第 09 行 代码 中 大 括号 “{1 +2》 内 定义 的 就 是 一 个 JavaScript 计算 表达 式 。React JSX 语法 
会 将 “1 +2” 的 算术 运算 结果 显示 在 页 面 中 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 12.6 所 示 。 
| 各 JavaScript 全 程 实例 x [EE 
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JavaScript React 开 发 - JSX JavaScript 表 达 式 (一 ) 


JSX - JavaScript Calculate Expression 


Now calculate: 1 + 2 = 3. 


图 12.6 ”ReactJSX 中 的 JavaScript 计算 表达 式 


如 图 12.6 中 的 箭头 所 示 ， 页 面 中 成 功 显示 了 表达 式 “1 + 2” 的 运算 结果 “3”。 
React JSX 中 的 JavaScript 表达 式 是 无 法 使 用 条 件 语 句 (if) 的 , 但 是 可 以 使 用 三 元 条 件 表达 式 。 
下 面 看 一 个 具体 的 代码 实例 。 


【代码 12-8】( 详 见 源 代码 目录 ch12-react-jsx-tri-exp.html 文件 ) 


01 <div id='id-div-react'></div> 
02 <script type="text/babel"> 


03 // TODO: get div 

04 Var divReact = document .getElementById('id-div-react'); 
05 // TODO: React JSX 

06 var = 1 


07 const reactSpan = ( 
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08 <span> 

09 <h3>JSX - JavaScript Triple Expression</h3> 

10 <p>Return (i ==1 ori!=1) is: {i==1? 'true' : 'false'}.</p> 
1 </span> 

2 ) 7 

re ReactDOM.render (reactSpan, divReact); 


14 </script> 


关于 【代码 12-8】 的 说 明 : 


@ 第 06 行 代码 定义 了 一 个 变量 (i)， 初 始 化 为 数值 1 进行 测试 ， 然 后 变更 为 数值 2 进行 测试 。 
@ 第 10 行 代码 中 大 括号 “{i 一 17'true': 'false'》 内 定义 的 就 是 一 个 JavaScript 三 元 条 件 表达 式 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 12.7 所 示 。 
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JavaScript React 开 发 - JSX JavaScript 表 达 式 (二 ) JavaScript React 开 发 - JSX JavaScript 表 达 式 (二 ) 


JSX - JavaScript Triple Expression 


Return (i == 1 ori != 1) is : true, 


JSX - JavaScript Triple Expression 


Retum (i == 1 ori != 1) is ; false, 


条 件 : i=1 


图 12.7 React JSX 中 的 JavaScript 三 元 条 件 表达 式 


如 图 12.7 中 的 箭头 所 示 ， 左 边 页 面 中 显示 了 初始 条 件 “i=1” 时 的 三 元 条 件 表 达 式 的 运算 结果 
为 “true”， 右 边 页 面 中 显示 了 初始 条 件 “i=2” 时 的 三 元 条 件 表达 式 的 运算 结果 为 “false”。 


12.7 在 JSX 中 使 用 JavaScript 函数 


本 节 在 JavaScript 表达 式 的 基础 上 ， 进 一 步 介绍 在 JSX 中 使 用 JavaScript 函数 。 在 JSX 中 调用 


JavaScript 函数 与 表达 式 一 样 ， 同 样 是 需要 使 用 大 括号 “{ }” 来 引用 的 。 下 面 我 们 看 一 个 具体 的 代 
码 实例 。 


【代码 12-9】( 详 见 源 代码 目录 ch12-react-jsx-js-func.html 文件 ) 


01 <!DOCTYPE html> 

02 <html> 

03 <head> 

<script src="https://unpkg.com/react@16/umd/react.development.js"> 


</script> 


第 12 章 React 开 发 | 277 


05 <script src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 

06 <script src="https://unpkg.com/babel-standalone@6.26.0/babel .min.js"> 
</script> 

07 <title>JavaScript 全 程 实例 </title> 

08 </head> 

09 <body> 

10 <!-- 添加 文档 主体 内 容 --> 

11 <header> 

2 <nav>JavaScript React 开发 - 在 JSX 中 使 用 JavaScript 函数 </nav> 

13 </header> 

14 <div id='id-div-react'></div> 

15 <script type="text/babel"> 

16 // TODO: get div 

Thy var divReact = document .getElementById('id-div-react'); 

18 // TODO: define const obj 

19 const userinfo = { 

20 Ew NOMI 

rl Username: 'king', 

22 gender: 'male' 

23 }; 

24 function getUserinfo(ui) { 

25 return ui.username + "[id:" + ui.id + "]'s gender is "+ 

ui.gender + "."; 

26 : 

2 // TODO: React JSX 

28 const reactSpan = ( 

29 <span> 

30 <h3>JavaScript Function in JSX</h3> 

fl <p>{getUserinfo (userinfo) }</p> 

32 </span> 

33 LN 

34 ReactDOM.render (reactSpan, divReact); 

350 </Sscript> 

36 </body> 

37 </html> 


关于 【代码 12-9】 的 说 明 : 


@ 第 19~23 行 代码 定义 了 一 个 JavaScript 常量 对 象 (userinfo )， 并 初始 化 了 一 组 个 人 相关 信息 。 
@ 第 24~26 行 代码 定义 了 一 个 JavaScript 函数 ( getUserinfo() ), 并 通过 第 25 行 代码 返回 了 一 行 
文本 信息 (通过 将 个 人 相关 信息 所 组 合 而 成 )。 
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@ 第 28~33 行 代码 定义 了 一 段 完整 的 JSX 代码 , 实现 了 一 个 虚拟 DOM 对 象 ( 常量 reactSpan )。 
其 中 ， 在 第 31 行 代码 中 调用 了 JavaScript 函数 (getUserinfo0 )。 

”第 34 行 代码 调用 React DOM 对 象 的 render() 方 法 ,将 虚拟 DOM 对象 (常量 reactSpan ) 泻 染 
到 页 面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 12.8 所 示 。 
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Javascript Function in JSX 
king[id:007]'s gender is male. 
图 12.8 ”ReactJSX 中 的 JavaScript 函数 (一) 


如 图 12.8 中 的 箭头 所 示 ， 页 面 中 成 功 显示 了 通过 JavaScript 函数 返回 的 个 人 信息 。 
React JSX 表达 式 还 可 以 通过 嵌入 JavaScript 函数 中 来 运行 ， 该 方式 的 代码 写法 更 加 直接 ， 更 
要 的 是 可 以 在 JSX 中 使 用 条 件 语句 (if) 来 进行 逻辑 判断 。 下 面 看 一 个 具体 的 代码 实例 。 


jh 


【代码 12-10】( 详 见 源 代码 目录 ch12-react-jsx-exp-in-func.html 文件 ) 


01 <div id='id-div-react'></div> 

02 <script type="text/babel"> 

03 // TODO: get div 

04 var divReact = document .getElementById('id-div-react'); 

05 // TODO: define const obj 

06 const userinfo = { 

07 i yb 

08 Username: "king'v 

09 gender: 'male' 

10 ] 

Ll // TODO: React JSX Exp in JavaScript Function 

2 function getUserinfo(ui) { 

| 4 

14 return <span> 

了 <h3>JSX Exp in JavaScript Function</h3> 

16 <p>{ui.username + "[id:" + ui.id + "]'s gender is "+ 
ui.gender + "."}</p> 
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17 </span>; 

18 } else { 

19 return <span> 

20 <h3>JSX Exp in JavaScript Function</h3> 
21 <p>empty user info.</p> 

总 全 </span>; 

23 } 

24 } 

25 // TODO: React Render 

26 ReactDOM.render (getUserinfo(userinfo), divReact); 
27 </script> 


关于 【代码 12-10】 的 说 明 : 


@ 这 段 代 码 是 在 【代码 12-9】 的 基础 上 修改 而 成 的 ， 主 要 是 将 JSX 代码 ( 见 第 14 ~ 17 行 和 第 
19~22 行 代码 ) 以 表达 式 的 形式 直接 嵌入 getUserinfo0) 函 数 方法 中 来 运行 了 。 

@ 另外 ， 在 第 13 行 代码 中 加 入 了 条 件 语句 (让 ) 来 判断 参数 (ui ) 是 否 有 效 ， 然 后 根据 判断 结 
果 选 择 相应 的 JSX 代码 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 12.9 所 示 。 
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JavaScript React 开 发 - JSX 表 达 式 嵌入 JavaScript 函 数 JavaScript React 开 发 - JSX 表 达 式 嵌入 JavaScript 函 数 


JSX Exp in JavaScript Function JSX Exp in Javascript Function 


king[id:007]'s gender is male. empty user info. 


12.9 ReactJSX 中 的 JavaScript 函数 〈 二 ) 


如 图 12.9 中 的 箭头 所 示 ， 左 边 页 面 中 显示 了 参数 Cui) 有 效 时 的 页 面 效 果 ， 右 边 页 面 中 显示 
了 参数 (ui) 为 空 时 的 页 面 效果 。 


12.8 ”React Components 设计 模式 


React Components (组 件 ) 设计 模式 允许 设计 人 员 将 用 户 界面 的 UI 部 分 剥离 出 来 ， 构 成 一 个 
单独 的 部 件 。React Components 〈 组 件 ) 在 设计 原理 上 保持 了 独立 性 和 功能 完整 性 ， 因 此 也 就 具有 
了 可 重复 使 用 的 特性 ， 这 也 是 React 的 性 能 优势 之 一 。 
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在 React 中 定义 Components (组件) 一 般 有 两 种 方式 ， 分 别 是 函数 方式 和 ES6 class 方式 ， 这 
两 种 方式 在 功能 效果 上 是 等 同 的 。 下 面 我 们 分 别 介绍 这 两 种 方式 的 设计 过 程 。 
首先 ， 看 一 个 基于 函数 方式 设计 React Components (组 件 ) 的 代码 实例 。 


【代码 12-11】( 详 见 源 代码 目录 ch12-react-comp-fu 


01 <!DOCTYPE html> 


02 <htm1> 

03 <head> 

04 <script src="https://unpkg.com/react@16/umd/react.development.js"> 
</script> 

05 <script src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 

06 <script src="https://unpkg.com/babel-standalone@6.26.0/babel .min.js"> 
</script> 

07 <title>JavaScript 全 程 实例 </title> 

08 </head> 

09 <body> 


10 <!-- 添加 文档 主体 内 容 --> 

11 <header> 

a ke <nav>JavaScript React 开发 - React Components (函数 方式 ) </nav> 
13 </header> 

14 <div id='id-div-react'></div> 

15 <script type="text/babel"> 


16 // TODO: get div 

yh var divReact = document .getElementById('id-div-react'); 
18 // TODO: function React Components 

19 function ReactComp() { 

20 return <span> 

2 <h3>React Components (Func) </h3> 

2 <p>This is a func React Components .</P> 
23 </span>; 

24 } 

25 // TODO: define const 

26 const elReactComp = <ReactComp/>; 

27 ReactDOM.render (elReactComp, divReact); 

28 </script> 

29 </body> 

30 </html> 


关于 【代码 12-11】 的 说 明 : 
e@ 第 19~24 行 通过 一 个 自 定义 函数 (ReactComp() ) 封装 了 一 个 虚拟 DOM 对 象 ， 具 体 说 明 如 下 : 
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> 第 19 行 代码 声明 的 函数 名 (ReactComp ) 就 是 React Components (组 件 ) 的 名 称 (组 
件 名 )。 

> 第 20~23 行 代码 返回 了 一 个 通过 <span>、<h3> 和 <p> 标 签 元 素 组 合 而 成 的 虚拟 DOM。 

@ 第 26 行 代码 通过 const 声明 了 一 个 常量 (elReactComp )， 保 存 了 以 组 件 名 (ReactComp ) 生 
成 的 自 定义 标签 (<ReactComp/> )。 特别 要 注意 , 原生 HTML 标签 元 素 名 可 以 小 写字 母 开 头 ， 
而 React 自 定义 组 件 名 必须 以 大 写字 母 开 头 ; 另外 ， 自 定义 组 件 只 能 包含 一 个 顶层 标签 ， 否 
则 也 会 报错 。 

日 第 27 行 代码 调用 React DOM 对 象 的 render() 方 法 , 将 自 定义 组 件 (<ReactComp/> ) 泻 染 到 页 
面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 12.10 所 示 。 
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JavaScript React 开 发 - React Components( 函 数 方式 ) 


React Components(Func) 
This is a func React Components. 、 


图 12.10 React Components (组 件 ) 函数 方式 
如 图 12.10 中 的 箭头 所 示 ， 页 面 中 成 功 显示 了 通过 React Components 〈 组 件 ) 函数 方式 泻 染 的 


效果 。 


基于 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 


除了 函数 方式 外 ，React Components (组件) 还 可 以 使 用 ES6 class 方式 来 生成 。 下 面 看 一 个 
ES6 class 方式 设计 React Components (组件 ) 的 代码 实例 。 


12】( 详 见 源 代码 目录 ch12-react-comp-class.html 文件 ) 


<div id='id-div-react'></div> 
<script type="text/babel"> 
// TODO: get div 
var divReact = document .getElementById('id-div-react'); 
// TODO: function React Components 
class ReactComp extends React.Component { 
render() { 
return <span> 
<h3>React Components (ES6 class)</h3> 
<p>This is a ES6 class React Components .</P> 


</span>; 
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12 } 

3 

14 // TODO: define const 

1 const elReactComp = <ReactComp/>; 

16 ReactDOM.render (elReactComp, divReact); 
17 </script> 


关于 【代码 12-12】 的 说 明 : 
”这 段 代码 是 在 【代码 12-11】 的 基础 上 修改 而 成 的 ， 主 要 是 将 通过 函数 方式 定义 的 组 件 
(<ReactComp/> ) 改 成 通过 ES6 class 方式 来 定义 。 

@ 第 06~ 13 行 通过 class 关键 字 声 明了 一 个 React Components (组 件 ) 类 ， 具 体 说 明 如 下 : 
> 第 06 行 代码 定义 类 名 为 ReactComp， 继 承 自 React Component 对 象 。 
> 第 07~ 12 行 代码 通过 render 方法 定义 了 一 个 通过 <span>、<h3> 和 <p> 标 签 元 素 组 合 而 成 

的 虚拟 DOM， 然 后 通过 retum 语句 返回 。 

@ 第 15 行 代码 通过 const 声明 了 一 个 常量 (elReactComp )， 保 存 了 以 组 件 名 (ReactComp ) 生 
成 的 自 定 义 标 签 (<ReactComp/> )。 

@ 第 16 行 代码 调用 React DOM 对 象 的 render() 方 法 , 将 自 定义 组 件 (<ReactComp/> ) 泻 染 到 页 
面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 12.11 所 示 。 
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JavaScript React 开 发 - React Components(ES6 class) 


React Components(ES6 class) 


This is a ES6 class React Components. w、_ 


图 12.11 ReactComponents (组 件 ) ES6 class 方式 


如 图 12.11 中 的 箭头 所 示 ， 页 面 中 成 功 显示 了 通过 React Components (组 件 ) ES6 class 方式 演 
染 的 效果 。 


12.9 React Components 参数 


React Components 〈 组 件 ) 还 支持 使 用 参数 (properties) ， 可 以 通过 props 对 象 来 实现 数据 传 
递 和 返回 。 下 面 看 一 个 具体 的 代码 实例 。 
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【代码 12-13】( 详 见 源 代码 目录 ch12-react-comp-props.html 文件 ) 


01 
02 
03 
04 


05 


06 


07 
08 
09 
10 
12 
13 
14 
5 
16 
7 
18 
19 
20 
2 
22 
2 
24 
25 
26 
27 
28 
人 
30 
2 
33 
34 
35 
36 
3 
38 
39 


<!DOCTYPE html> 


<html> 
<head> 
<script src="https://unpkg.com/react@16/umd/react.development .js"> 
</script> 
<script src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6.26.0/babel .min.js"> 
</script> 
<title>JavaScript 全 程 实例 </title> 
</head> 
<style type="text/css"> 
了 .P=zight { 
text-align: right; 
上 
</style> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript React 开发 - React Components 参数 </nav> 
</header> 


<div id='id-div-react'></div> 
<script type="text/babel"> 
// TODO: get div 
var divReact = document .getElementById('id-div-react'); 
// TODO: function React Components with props 
function ReactComp(props) { 
return <span> 
<h3>React Components ({props.name})</h3> 
<p>This is a webpage for {props.info}.</p> 
<p className={props.className}> --- by king.</p> 
</span>; 
} 
// TODO: define const 
const elReactComp = <ReactComp 
name="props" 
info="React Components Props" 
className="p-right"/>; 
ReactDOM.render (elReactComp, divReact); 
</script> 
</body> 
</html> 
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关于 【代码 12-13】 的 说 明 : 


”这 段 代码 是 在 【代码 12-11】 的 基础 上 修改 而 成 的 ， 主 要 是 增加 了 参数 props 对 象 的 使 用 。 

@ 第 24~30 行 代 码 通过 一 个 自 定 义 函 数 (ReactComp() ) 封装 了 一 个 虚拟 DOM 对 象 ， 具 体 说 
明 如 下 : 
> 第 24 行 代码 在 声明 的 函数 名 (ReactComp ) 内 定义 了 参数 (props ) 对 象 。 
> 第 26~28 行 代码 分 别 通过 参数 (props ) 对 象 的 “name”“info” 和 “className” 必 性 将 

属性 值 传递 到 虚拟 DOM 中 进行 显示 。 

@ 第 32~35 行 代码 通过 const 声明 了 一 个 常量 (elReactComp), 保存 了 以 组 件 名 (ReactComp ) 
生成 的 自 定 义 标签 (<ReactComp/> ), 在 自 定义 标签 中 依次 添加 了 “name”“info” 和 “className” 
属性 ， 并 定义 了 相应 的 属性 值 。 这 里 要 注意 一 点 ， 原 生 HTML 标签 中 的 类 属性 名 需要 替换 为 
className， 而 不 能 使 用 原生 的 class (因为 class 是 JavaScript 的 保留 字 )。 

@ 第 36 行 代码 调用 React DOM 对 象 的 render() 方 法 ， 将 自 定 义 组 件 (<ReactComp/> ) 泻 染 到 页 
面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 12.12 所 示 。 
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React Components(props) 
This is a webpage for React Components Props. 


--- by king. 


图 12.12 React Components (组 件 ) 参数 (props) 


如 图 12.12 所 示 ， 页 面 中 成 功 显示 了 通过 React Components (组 件 ) 参数 (props) 所 泻 染 的 
效果 。 


12.10 React Components 复合 


React Components〈 组 件 ) 的 使 用 非常 灵活 ， 还 可 以 通过 创建 多 个 组 件 来 合成 一 个 组 件 ， 一 般 
称 之 为 组 件 复合 。React Components (组 件 ) 复合 的 思想 是 把 组 件 按照 不 同 的 功能 进行 逻辑 分 割 ， 
使 得 业务 逻辑 更 加 清晰 、 管 理 更 加 高 效 。 下 面 看 一 个 关于 React Components〈 组 件 ) 复合 的 代码 
实例 。 
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【代码 12-14】( 详 见 源 代码 目录 ch12-react-comp-composing.html 文件 ) 


01 <!DOCTYPE html> 


02 <htm1> 

03 <head> 

04 <script src="https://unpkg.com/reactel6/umd/react.development.js"> 

</script> 

05 <script src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 

06 <script src="https://unpkg.com/babel-standalone@6.26.0/ 
babel.min.js"></script> 

07 <title>JavaScript 全 程 实例 </title> 

08 </head> 

09 <body> 


10 <!-- 添加 文档 主体 内 容 --> 

11 <header> 

12 <nav>JavaScript React 开发 - React Components 复合 </nav> 
13 </header> 

14 <div id='id-div-react'></div> 

15 <script type="text/babel"> 


16 // TODO: get div 

Tt var divReact = document .getElementById('id-div-react'); 
18 // TODO: function React Components - Title 

19 function Title(props) { 

20 return <h3>React Components {props.name}</h3>; 

到 出 } 

2 // TODO: function React Components - Content 

2 function Content (props) { 

24 return <p>This is a webpage for {props.info}.</p>; 
25 》 

26 // TODO: function React Components - Author 

27 function Author(props) { 

28 return <p className={props.className}>--- by King.</p>; 
29 } 

30 // TODO: function React Components by Composing 
function ReactComp() { 

32 return ( 

23 <span> 

34 <Title name="Composing"/> 

35 <Content info="React Components by Composing"/> 
36 <Author className="p-right"/> 

四 有 </span>); 


38 EL 
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39 
40 
41 
42 
43 


// TODO: render 

ReactDOM. render (<ReactComp/>, divReact); 
</script> 
</body> 
</html> 


关于 【代码 12-14】 的 说 明 : 

@ 这 段 代 码 是 在 【代码 12-13】 的 基础 上 按照 React Components (组 件 ) 复合 方式 改写 的 。 

@ 第 19~21 行 .第 23~25 行 和 第 27~29 行 代码 分 别 定义 了 三 个 组 件 ( Title、Content 和 Author )。 
@ 第 31~38 行 代码 是 React Components( 组 件 ) 复 合 的 关键 ,通过 一 个 自 定义 函数 ( ReactComp() ) 


封装 了 前 面 定义 的 三 个 组 件 ( Title、Content 和 Author )， 具 体 说 明 如 下 : 

> 第 34 行 代码 通过 以 组 件 名 ( Title ) 生成 的 自 定义 标签 (<Title/> ) 定义 了 一 个 虚拟 DOM， 
并 添加 了 “name” 属 性 ; 

> 第 35 行 代码 通过 以 组 件 名 ( Content ) 生成 的 自 定义 标签 (<Content/> ) 定义 了 一 个 虚拟 
DOM， 并 添加 了 “info” 属 性 ; 

> 第 36 行 代码 通过 以 组 件 名 (Author ) 生成 的 自 定义 标签 (<Author/> ) 定义 了 一 个 虚拟 
DOM， 并 添加 了 “className” 属性 。 

第 40 行 代 码 调用 React DOM 对 象 的 render() 方 法 ， 将 自 定义 组 件 (<ReactComp/> ) 泻 染 到 页 

面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 12.13 所 示 。 
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JavaScript React 开 发 - React Components 复合 


React Components Composing 
This is a webpage for React Components by Composing. 


一 by King. 


12.13 ”React Components (组 件 ) 复合 


如 图 12.13 所 示 ， 页 面 中 成 功 显示 了 通过 React Components (组 件 ) 复合 方式 所 泻 染 的 效果 。 


12.11 ” React Components 状态 


React 是 把 Components (组件) 视 作 一 个 状态 机 (State Machines) 来 设计 的 。 为 此 ，React 专 
门 定义 了 一 个 state( 状 态 ) 属性 用 于 更 新 Components 组件) 状态。 在 React 应 用 中 ， 用 户 交 互 
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工作 只 需 通 过 更 新 组 件 的 state (状态 ) 就 可 以 实现 ， 根 据 更 新 后 的 state (状态 ) 来 泻 染 UI 并 保持 
UI 和 数据 的 一 致 ( 不 需要 操作 DOM) 。 
下 面 先 看 一 个 关于 React Components (组 件 ) state (状态 ) 的 代码 实例 。 


代码 目录 ch12-react-comp-state.html 文件 ) 


01 <!DOCTYPE html> 


02 <html> 

03 <head> 

04 <script src="https://unpkg.com/react@16/umd/react.development.js"> 
</script> 

05 <script src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 

06 <script src="https://unpkg.com/babel-standalone@6.26.0/babel .min.js"> 
</script> 

07 <title>JavaScript 全 程 实例 </title> 

08 </head> 

09 <body> 


10 <!-- 添加 文档 主体 内 容 --> 

11 <header> 

12 <nav>JavaScript React 开发 - 组 件 状 态 (state)</nav> 
13 </header> 

14 <div id="id-div-react"></div> 

15 <script type="text/babel"> 


16 // TODO: get div 

ky var divReact = document .getElementById('id-div-react'); 
18 // TODO: React Component (class) 

19 class ReactState extends React.Component { 

20 constructor (props) { 

21 super (props); 

22 console.log("state before init:"); 

23 console.log(this.state); 

24 this.state = {name: "React Component State"}; 
之 5 console.log("state after init:"); 

26 console.log(this.state); 

27 } 

28 render() { 

29 return ( 

30 <span> 

31 <h3>React Component State</h3> 

32 </span> 

33 ) 


34 } 
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} 

// TODO: render 

ReactDOM. render (<ReactState/>, divReact); 
</script> 
</body> 
</html> 


关于 【代码 12-15】 的 说 明 : 
@ 第 19~35 行 代码 通过 ES6 class 方式 创建 一 个 React Component 组 件 (ReactState )， 具 体 说 明 


如 下 : 

> 第 20~27 行 代 码 添加 了 一 个 类 的 构造 函数 (constructor ) 来 初始 化 状态 ( state )。 注 意 ， 
状态 ( state ) 必 须 以 this 关键 字 的 方式 ( this.state ) 调 用 , 同时 类 组 件 应 始终 使 用 super(props) 
来 调用 基础 构造 函数 。 

> 第 24 行 代码 执行 了 初始 化 状态 (state ) 属性 的 操作 ( {name: "React Component State"} )， 
同时 在 初始 化 之 前 (第 22~23 行 代码 ) 和 初始 化 之 后 (第 25 ~26 行 代码 ) 分 别 在 浏览 
器 控制 台中 输出 状态 (state )， 目 的 就 是 测试 状态 ( state ) 的 变化 。 

> 第 28~34 行 代码 通过 render 方法 定义 了 虚拟 DOM， 用 于 显示 React Component 组 件 
(ReactState )。 


”第 37 行 代 码 调用 React DOM 对 象 的 render() 方 法 ， 将 自 定义 组 件 ( <ReactState/> ) 泻 染 到 页 


面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 12.14 所 示 。 


国 JavaScript 全 程 安 例 x ep ns 
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JavaScript React 开 发 - 组 件 状 态 (state) 


React Component State 
RR DO inspector 回 Console D Debugger » -x 
窗 时 Fiteroutput Persist Logs 


v 


2 items hidden by filters Reset fiters 


state before init: ch12-react-state.html:24:9 


undefined ch12-react-state.html:25:9 
state after init: ch12-react-state.html:27:9 


» Object { name: “React Coaponent State” } chi2-react-state.html:28:9 


12.14 ”React Components (组件 )state( 状 态 ) 


如 图 12.14 中 的 箭头 所 示 ， 浏 览 器 控制 台中 分 别 打印 出 了 state 状态 ) 属性 在 初始 化 之 前 和 初 
始 化 之 后 的 值 。 
下 面 继续 看 一 个 如 何 使 用 React Components (组件 ) state (状态 ) 更 新 当前 时 间 的 代码 实例 。 
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( 详 见 源 代码 目录 ch12-react-comp-state-date.html 文件 ) 


01 <!DOCTYPE html> 

02 <htm1> 

03 <head> 

04 <script src="https://unpkg.com/reactel6/umd/react.development.js"> 
</script> 

05 <script src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 

06 <script src="https://unpkg.com/babel-standalone@6.26.0/ 
babel .min.js"></script> 

07 <title>JavaScript 全 程 实例 </title> 

08 </head> 

09 <body> 

10 <!-- 添加 文档 主体 内 容 --> 

11 <header> 

12 <nav>JavaScript React 开发 - 通过 组 件 状态 (state) 更 新 时 间 </nav> 

13 </header> 

14 <div id="id-div-react"></div> 

15 <script type="text/babel"> 

16 // TODO: get div 

47 var divReact = document .getElementById('id-div-react'); 

18 // TODO: React Component (class) 

19 class ReactState extends React.Component { 

20 constructor (Props) { 

2 super (props); 

this.state = {date: new Date()}; 

23 

24 render() { 

25 return ( 

26 <span> 

<h3>React Component State</h3> 

28 <p>Now is {this.state.date.toLocaleTimeString()}.</p> 

29 </span> 

30 3 

3 } 

32 } 

23 // TODO: render 

34 ReactDOM. render (<ReactState/>, divReact); 

35. </script> 

36 </body> 

37 </html> 


关于 【代码 12-16】 的 说 明 : 
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@ 这 段 代 码 是 在 【代码 12-15】 的 基础 上 修改 而 成 的 ， 主 要 实现 了 更 新 当前 时 间 的 功能 。 
在 组 件 类 (ReactState ) 的 构造 方法 中 ， 第 22 行 代码 执行 了 初始 化 状态 ( state ) 属性 的 操作 
( {date: new Date0} )， 获 取 了 时 间 Date 对 象 (date )。 
@ 在 组 件 类 (ReactState ) 的 render 方法 中 , 第 28 行 代 码 通过 状态 (this.state ) 调 用 时 间 对 象 ( date ) 
更 新 了 当前 时 间 。 
日 第 34 行 代码 调用 React DOM 对 象 的 render() 方 法 ， 将 自 定义 组 件 (<ReactState/> ) 泻 染 到 页 
面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 12.15 所 示 。 
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React Component State 


Now is 11:30:21 AM . 


12.15 React Components (组件 ) 通过 state (状态 ) 更 新 时 间 


如 图 12.15 中 的 箭头 所 示 ， 浏 览 器 中 显示 了 通过 React Components (组件 ) state (状态 ) 更 新 
的 当前 时 间 。 


12.12” React Components 生命 周期 


在 前 一 节 中 ， 我 们 介绍 了 通过 React Components (组 件 ) state( 状 态 ) 更 新 当前 时 间 的 代码 实 
例 。 读 者 应 该 会 注意 到 ， 所 更 新 的 时 间 是 静态 的 ， 而 不 是 动态 同步 的 。 那 么 ， 如 何 实现 时 间 每 秒 更 
新 一 次 的 效果 呢 ? React Components (组 件 ) 设计 了 一 个 生命 周期 (LifeCycle) 的 方式 ， 可 以 通过 
挂 载 和 务 载 计 时 器 来 实现 该 功能 。 

React 设计 是 推荐 使 用 生命 周期 (LifeCycle) 方式 的 ， 因 为 在 实际 项 目 开 发 中 需要 加 载 大 量 的 
组 件 ， 当 这 些 组 件 不 再 使 用 后 需要 通过 销毁 来 释放 组 件 所 占用 的 资源 。 生 命 周 期 (LifeCycle) 方式 
提供 了 挂 载 (componentDidMount()) 和 和 拖 载 (componentWillUnmount()) 这 两 个 钩子 方法 来 实现 生 
命 周期 管理 。 

下 面 看 一 个 通过 React Components 〈 组 件 ) 生命 周期 方式 来 实现 网 页 时 钟 功能 的 代码 实例 。 
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码 目录 ch12-react-comp-lifecycle.html 文件 ) 


01 <!DOCTYPE html> 

02 <htm1> 

03 <head> 

04 <script src="https://unpkg.com/reactel16/umd/react.development.js"> 
</script> 

05 <script src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 

06 <script src="https://unpkg.com/babel-standalone@6.26.0/ 
babel .min.js"></script> 

07 <title>JavaScript 全 程 实例 </title> 

08 </head> 

09 <body> 

10 <!-- 添加 文档 主体 内 容 --> 

11 <header> 

32 <nav>JavaScript React 开发 - 生命 周期 (Lifecycle)</nav> 

13 </header> 

14 <div id="id-div-react"></div> 

15 <script type="text/babel"> 


16 // TODO: get div 

17 var divReact = document .getElementById('id-div-react'); 
18 // TODO: React Component (class) 

19 class ReactLifeCycleClock extends React.Component { 
20 constructor (Props) { 

FJ super (Props) 

this.state = {date: new Date()}; 
23 上 

24 // TODO: Mount 

呈 5 componentDidMount () { 

26 this .timerID = setInterval( 

六 () => this.timer()， 

28 1000 

29 3 

30 : 

31 // TODO: Unmount 

中 componentWill1Unmount () { 

33 clearInterval (this.timerID); 

34 } 

35 // TODO: Timer 

36 timer() { 


33 this.setState({ 
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38 date: new Date() 
39 J 
40 E 
4 // TODO: render 
42 render() { 
43 return ( 
44 <span> 
45 <h3>React Component LifeCycle Clock</h3> 
46 <p>The current time is {this.state.date. 
toLocaleTimeString()}.</p> 
47 </span> 
48 ); 
49 } 
50 } 
53 // TODO: render 
后 及 ReactDOM.render( 
53 <ReactLifeCycleClock/>, 
54 divReact 
55 让 
56 </script> 
57 </body> 
58 </html> 


关于 【代码 12-17】 的 说 明 : 
@ 第 19~ 50 行 代码 通过 ES6 class 方式 创建 一 个 React Component 组 件 (ReactLifeCycleClock )， 


具体 说 明 如 下 : 
> 第 20~23 行 代 码 添加 了 一 个 类 的 构造 函数 (constructor ) 来 初始 化 状态 ( state )。 其 中 ， 


第 22 行 代码 通过 对 状态 (this.state ) 属性 的 操作 (date: new Date() )， 定 义 了 一 个 时 间 对 
象 (date )。 


> 第 25~30 行 代码 定义 了 挂 载 钩子 方法 (componentDidMount() )， 并 通过 setInterval() 方 法 


定义 了 一 个 计时 器 (timerID )。 


> 第 32~34 行 代码 定义 了 十 载 钧 子 方法 ( componentWillUnmount() )， 并 通过 clearInterval() 


方法 清除 了 计时 器 (timerID )。 


> 第 36~40 行 代码 定义 了 一 个 用 于 更 新 时 间 的 timer() 方 法 ， 该 方法 通过 更 新 状态 ( state ) 


属性 实现 同步 时 间 的 功能 。 


> 第 42~49 行 代码 通过 render 方法 定义 了 虚拟 DOM， 用 于 显示 React Component 组 件 


(ReactLifeCycleClock )。 


@ 第 52 ~ 55 行 代码 调用 React DOM 对 象 的 render0 方 法 ， 将 时 钟 自 定义 组 件 


(<ReactLifeCycleClock/> ) 泻 染 到 页 面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 12.16 所 示 。 
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12.16 ”React Components (组件) 生命 周期 (LifeCycle》 实 现时 钟 


如 图 12.16 中 的 箭头 和 标识 所 示 ， 页 面 中 成 功 显示 了 通过 React Components (组 件 ) 生命 周期 
(LifeCycle) 方式 实现 的 同步 更 新 时 钟 的 效果 。 

在 React Components (组 件 ) 中 , 无 论 是 父 组 件 还 是 子 组 件 都 不 知道 某 个 组 件 是 有 状态 的 还 是 
无 状态 的 ， 并 且 也 不 关心 某 组 件 是 被 定义 为 一 个 函数 方式 或 是 一 个 ES6 class 方式 的 。 这 也 就 是 为 
什么 状态 (state》 通 常会 被 称 作 是 局 部 封装 ， 除 了 拥有 并 设置 它 的 组 件 外 ， 其 他 组 件 都 不 可 访问 。 

下 面 在 【代码 12-17】 的 基础 上 添加 一 个 WaterfallDate 组 件 (函数 方式 ) ， 并 在 props 属性 中 
以 多 种 方式 接收 date 值 。 目 的 是 让 props 属性 不 知道 date 值 是 来 自 state 状态 还 是 来 自 date 属性 输 
入 ， 验 证 React Components (组 件 ) 的 独立 性 。 在 官方 文档 中 ， 将 下 面 的 代码 称 为 数据 瀑布 (Data 
Flow Down) 方式 。 


【代码 12-18】( 详 见 源 代码 目录 ch12-react-comp-lifecycle-waterfall-data.html 文件 


01 <script type="text/babel"> 

02 // TODO: get div 

03 var divReact = document .getElementById('id-div-react'); 

04 // TODO: React Component (func) 

05 function WaterfallDate (Props) { 

06 return <p>Now is {props.date.toLocaleTimeString()}.</p>; 
07 } 

08 // TODO: React Component (class) 

09 class ReactLifeCycleClock extends React.Component { 

10 constructor (props) { 
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3 super (Props) 7 
2 this.state = {date: new Date()}; 
13 . 
14 // TODO: Mount 
1 componentDidMount () { 
16 this .timerID = setIntervall( 
站 () => this.timer(), 
18 1000 
19 ) 7 
20 } 
2 // TODO: Unmount 
世 componentWillUnmount() { 
PFA clearInterval (this .timerID) 
24 } 
25 // TODO: Timer 
26 timer() { 
27 this.setState({ 
28 date: new Date() 
29 ]) 7 
30 } 
3 // TODO: render 
3 render() { 
33 return ( 
34 <span> 
35 <h3>React Component LifeCycle Clock</h3> 
36 <p>The current time is 
{this.state.date.toLocaleTimeString()}.</p> 
37 <h3>LifeCycle Clock (WaterFall Data)</h3> 
38 <WaterfallDate date={this.state.date}/> 
39 <h3>LifeCycle Clock (Func)</h3> 
40 <WaterfallDate date={new Date()}/> 
41 </span> 
42 ) 7 
43 
44 } 
45 // TODO: render 
46 ReactDOM.render( 
47 <ReactLifeCycleClock/>, 
48 divReact 
49 ) 


50 </script> 
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关于 【代码 12-18】 的 说 明 : 
@ 【代码 12-18〗 是 在 【代码 12-17】 的 基础 上 修改 而 成 的 ， 主 要 是 在 第 05 ~ 07 行 代码 中 增加 
了 一 个 function 组 件 ( WaterfallDate )。 


@ 同时， 在 第 32~43 行 代码 调用 的 render() 方 法 中 增加 了 两 种 使 用 WaterfallDate 组 件 的 方式 ， 
具体 如 下 : 


> 第 38 行 代码 是 通过 状态 (state ) 属性 获取 的 当前 时 间 。 

> 第 40 行 代码 是 直接 通过 人 工 方式 (新建 Date 对 象 ) 获取 的 当前 时 间 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 12.17 所 示 。 
园 JavaScript 全 程 实例 x lt 一 口 区 
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图 12.17 React Components (组 件 ) 生命 周期 (LifeCycle) 实现 时 钟 (数据 瀑布 方式 ) 


如 图 12.17 所 示 , 数据 瀑布 方式 类 似 于 自 项 向 下 的 单 向 数据 流 , 不 论 任何 状态 都 始终 由 某 些 特 
定 组 件 所 有 ， 并 且 从 该 状态 导出 的 任何 数据 只 能 影响 到 下 方 的 组 件 。 
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本 章 介绍 在 Web 前 端 开发 领域 非常 火爆 的 Vue.js 框架 (一 款 用 来 构建 用 户 界面 的 渐进 式 Web 
框架 ) 。 本 章 的 内 容 主要 包括 Vuejs 框架 概述 、 泻 染 原 理 、 安 装 使 用 、 模 板 语 法 、 条 件 循 环 和 事 
件 属性 等 基础 知识 。 


13.1 Vue.js 概述 


Vuejs(/vju: /， 发音 类 似 于 英文 单词 view) 是 一 套 构建 用 户 界面 的 渐进 式 Web 框架 ,其 设计 
思想 就 是 通过 以 数据 驱动 和 组 件 化 视图 来 构建 用 户 界面 。 
Vuejs 框架 采用 自 底 向 上 增 量 开发 的 设计 模式 , 框架 的 核心 库 专 注 于 视图 层 设计 , 这 样 就 易于 
与 其 他 框架 或 已 有 项 目 进行 整合 。 同 时 ，Vuejjs 与 单 文件 组 件 或 Vuejjs 生态 系统 扩展 库 相 结合 使 用 
时 ， 也 完全 能 够 为 复杂 的 单 页 应 用 提供 驱动 。 
对 于 Vuejs 框架 ， 业 内 有 过 这 样 的 评价 :， “Vue.js 兼 具 Angularjs 和 React 的 优点 ， 并 最 大 程 
度 气 弃 了 它们 的 缺点 ”。 同 时 ，Vue.js 框架 之 所 以 深 受 广大 国内 程序 员 的 推演 ， 因 其 作者 是 一 位 地 
道 的 中 国人 尤 雨 溪 ，Evan You) ， 这 也 是 国人 在 开源 世界 中 的 骄傲 。 
本 质 上 ，Vuejjs 框架 主要 是 基于 数据 驱动 来 专注 于 视图 组 件 设计 的 ， 其 提供 了 更 加 简洁 、 更 易 
于 理解 的 API， 使 得 设计 人 员 能 够 快速 地 上 手 并 使 用 。 在 使 用 Vuejs 框架 之 前 ， 建 议 先 掌握 以 下 各 
方面 的 编程 知识 : 
(1) HTML 网 页 设计 。 
(2) CSS3 层 秋 样式 代码 。 
(3) JavaScript 脚本 语言 开发 。 
由 此 可 见 ， 学 习 Vuejs 框架 要 求 门槛 相对 容易 ， 相 信 大 多 数 的 读者 都 具有 以 上 编程 语言 的 开 
发 经 验 。 
通过 Vuejs 框架 可 以 设计 出 功能 强大 的 Web 视图 应 用 ， 本 章 将 为 读者 介绍 Vue.js 开发 的 相关 
知识 及 案例 。 


备注 : Vue.js 框架 官方 网 址 为 https://cn.vuejs.org。 
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13.2 第 一 个 Vue.js 应 用 


从 本 节 开 始 , 我 们 正式 介绍 如 何 使 用 Vue.js 框架 开发 Web 前 端 应 用 。 正 所 谓 “ 万 变 不 离 其 宗 ”， 
第 一 个 Vuejs 应 用 还 是 从 基本 的 “Hello World” 开 始 最 合适 。 

首先 ， 使 用 Vue.js 框架 要 先 引 用 Vue.js 库 文件 (区 分 开发 版 本 和 生产 版 本 ) ， 这 里 推荐 使 用 
如 下 CDN 地 址 。 

开发 版 本 的 React CDN 库 如 下 : 


<!-- 开发 环境 版 本 ， 包 含 了 有 帮助 的 命令 行 警告 --> 


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 


生产 版 本 的 CDN 库 如 下 : 


<!-- 生产 环境 版 本 ， 优 化 了 尺寸 和 速度 --> 


<script src="https://cdn.jsdelivr.net/npm/vue"></script> 


当然 ， 读 者 也 可 以 将 vue. js 或 vue.min.js 库 文件 下 载 到 本 地 来 引用 。 另 外 ， 如 果 想 使 用 Vue 
Devtools 进行 调试 ， 就 必须 使 用 开发 版 本 的 库 文件 。 
下 面 看 一 下 使 用 Vuejs 框架 实现 “Hello World” 应 用 的 代码 实例 。 


【代码 13-1】( 详 见 源 代码 目录 ch13-vue-js-hello.html 文件 ) 


01 <!DOCTYPE html> 

02 <html> 

03 <head> 

04 <script src="js/vue.js"></script> 
05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript Vue.js 开 发 - Hello</nav> 
11 </header> 

12 <div id='id-div-vue'> 


13 <h3 id="app">{{ message }}</h3> 
14 </div> 

50<script> 

16 Var app = new Vuel({ 

i el: '#app', 

18 data: { 


19 message : "Hello Vue.js!" 
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20 
21 
22 
23 
24 


} 
a 
</script> 
</body> 
</html> 


关于 【代码 13-1】 的 说 明 : 


第 04 行 代码 引用 了 Vuejs 框架 所 需 的 库 文件 (vuejs )。 这 里 引用 的 是 开发 版 的 库 文件 ， 当 然 

也 可 以 引用 压缩 版 的 库 文件 ( vue.min.js， 不 过 无 法 使 用 Vue Devtools 调试 功能 )。 

第 12 ~ 14 行 代码 通过 <div> 标 签 元 素 定义 了 一 个 层 ， 其 中 第 13 行 代码 定义 的 <h3 id="app"> 

标签 元 素 用 于 显示 通过 Vuejs 框架 泻 染 的 文本 内 容 。 

第 16~ 21 行 代码 就 是 Vue.js 的 核心 ,采用 模板 语法 定义 的 声明 式 数据 泻 染 DOM 系统 ， 具 体 

内 容 如 下 : 

> 第 16 行 代码 通过 Vue 构造 器 (注意 使 用 new 关键 字 ) 创建 了 一 个 Vue 对象 (app )。 

> 第 17 行 代码 通过 “el” 参 数 指定 将 要 泻 染 的 DOM (通过 id 属性 )。 

> 第 18~20 行 代码 通过 “data” 参 数 定义 属性 ， 就 是 要 泻 染 的 数据 内 容 。 其 中 ， 在 第 19 行 
代码 中 定义 了 一 个 “message” 属 性 ， 其 属性 值 将 会 泻 染 到 第 13 行 代 码 中 对 应 的 

“{{message}}” 位 置 ， 特 别 注意 这 里 要 将 “message” 放 进 双 大 括号 中 来 使 用 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 13.1 所 示 。 


国 JavaScript 全 程 实例 x ee 口 x 


CG © localhost63342 vv … 回 少 


外 


Javascript Vuejs 开 发 - Hello 


Hello Vue.js! 


图 13.1 Vuejs 实现 “Hello World” 


如 图 13.1 所 示 ， 页 面 中 成 功 显示 了 通过 Vue.js 框架 泻 染 出 的 文本 内 容 (Hello，Vuejs!) 。 用 
很 少 的 代码 就 实现 了 演 染 功能 ， 是 不 是 很 激动 呢 ? 

Vuejs 应 用 看 起 来 似乎 异常 简单 ， 其 实 Vue.js 框架 在 底层 做 了 大 量 工作 。 最 主要 的 一 点 就 是 
数据 和 DOM 已 经 在 内 部 进行 了 绑 定 ， 所 有 数据 更 新 都 是 响应 式 的。 下面 我 们 通过 浏览 器 的 
JavaScript 控制 台 来 验证 一 下 Vuejs 框架 的 这 个 特性 ， 有 具体 操作 步骤 如 图 13.2 所 示 。 

如 图 13.2 中 的 箭头 和 标识 所 示 ， 我 们 首先 在 左边 页 面 的 浏览 器 JavaScript 控制 台中 输入 属性 
名 称 “app.message”( 对 应 【代码 13-1】 的 第 19 行 代码 ), 然后 输入 新 修改 的 属性 值 (“Hello, King!”) 


后 按 回 


了 Vue 


车 键 确认 。 接 着 在 右边 页 面 中 成 功 显示 了 同步 更 新 的 文本 内 容 (“Hello, King!”) ， 证 明 
js 框架 的 数据 响应 式 更 新 功能 。 感 兴趣 的 读者 可 以 按照 上 面 的 步骤 操作 体验 一 下 。 
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图 13.2 Vuejs 实现 数据 响应 式 功 能 
13.3 ”Vue.js 构造 器 


这 一 节 我 们 介绍 关于 Vue.js 框架 构造 器 的 内 容 。 所 谓 构造 器 ， 就 是 创建 Vue 演 染 的 容器 ， 具 
体 代 码 形式 如 下 : 


<!-- 创建 Vue 构造 器 --> 
var app = new Vue { 
el: 
data: { } 
method: { } 


其 中 ，“el” 参 数 指定 要 泻 染 的 目标 DOM，“data” 参 数 用 于 定义 属性 ，“method” 参 数 用 
于 定义 函数 方法 。 
下 面 看 一 个 关于 使 用 Vue 构造 器 的 基本 代码 实例 。 


【代码 13-2】( 详 见 源 代码 目录 ch13-vue-js-vue.html 文件 ) 


01 <!DOCTYPE html> 

02 <html> 

03 <head> 

04 <script src="js/vue.js"></script> 
05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 </style> 

08 <body> 

09 <!-- 添加 文档 主体 内 容 --> 

10 <header> 
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了 <nav>JavaScript Vue.js 开发 - Vue 构造 器 </nav> 


12 </header> 
13 <xdiv id='id-div-vue'> 


14 <h1l>{{ title }}</h1l> 

15 <h3>{{ content }}</h3> 

16 <p>{{ all() }}</p> 

17 </div> 

18 <script type="text/javascript"> 

19 Var app = new Vue({ 

20 el: '#id-div-vue', 

ps data: { 

2 title : "Vue 构造 器 "， 

23 content : "通过 Vue 构造 器 创建 应 用 ， 实 现 页 面 泻 染 功能 ." 
24 ]}v 

25 methods: { 

26 all : function () 1{ 

EM} return this.title + " : " + this.content; 
28 } 

29 } 

30 Fn 

31 </script> 

32 </body> 

33 </html> 


关于 【代码 13-2】 的 说 明 : 

@ 第 20 行 代码 通过 “el” 参 数 指定 将 要 泻 染 的 DOM (id= 'id-div-vue')。 

@ 第 21~24 行 代码 通过 “data” 参 数 定 义 了 一 组 属性 (title 和 content )， 描 述 了 要 泻 染 的 文本 
内 容 。 

@ 第 25~29 行 代码 通过 “methods” 参 数 定义 了 一 个 函数 方法 (all )， 通 过 retur 语句 返回 了 两 
个 属性 (title 和 content ) 内 容 的 组 合 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 13.3 所 示 。 
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通过 Vue 构 造 加 创建 应 用 , 实现 页 面 泻 染 功 能 - 


Yue 改造 器 : 适 过 Vue 构 千 圳 创建 应 用 , 实现 页 面 这 染 功 能 


13.3 ”Vuejs 构造 器 
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如 图 13.3 所 示 ， 页 面 中 成 功 显示 了 通过 Vuejs 框架 泻 染 出 的 文本 内 容 (包括 通过 函数 al0 所 
组 合 的 内 容 ) 。 


13.4 ”Vue.js 构造 器 属性 修改 


我 们 再 回 过 头 来 看 看 【代码 13-2】: Vue 构造 器 中 “data ”参数 所 定义 的 属性 其 实 就 是 一 个 JSON 
结构 数据 ， 那 么 是 不 是 可 以 单独 定义 这 个 属性 呢 ? 下 面 先 看 一 个 关于 使 用 Vue 构造 器 “data ”参数 
定义 属性 的 代码 实例 。 


【代码 13-3】( 详 见 源 代码 目录 ch13-vue-js-vue-data.html 文件 ) 


01 <!DOCTYPE html> 

02 <htm1> 

03 <head> 

04 <script src="js/vue.js"></script> 
05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript Vue.js 开发 - Vue 构造 器 "data" 参 数 </nav> 
11 </header> 


12 <div id='id-div-vue'> 


13 <h1>{{ title }}</hl> 

14 <h3>{{ content }}</h3> 

US <p>{{ all() }}</p> 

16 </div> 

17 <script type="text/javascript"> 

18 var data = { 

19 title : "Vue 构造 器 \"data\ "参数"， 

20 content : "定义 \"data\" 参 数 属性 的 另 一 种 方法 ." 
包 主 } 

只 2 var app = new Vuel({ 

23 el: '#id-div-vue', 

24 data: data, 

25 methods: { 

26 nl Function Ct 

27 return this.title + " : " + this.content; 
28 | 

29 了 


30 Ds; 
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31 </script> 
32 </body> 
33 </html> 


关于 【代码 13-3】 的 说 明 : 

@ 【代码 13-3】〗 是 在 【代码 13-2】〗 的 基础 上 修改 而 成 的 ， 主 要 就 是 改变 了 “data” 参 数 属性 值 
的 定义 方式 。 

@ 第 18~21 行 代码 定义 了 一 个 JSON 结构 数据 对 象 (data )。 注意， 这 里 使 用 了 与 Vue 构造 器 

“data” 参 数 同名 的 形式 ， 是 为 了 后 面 的 内 容 做 一 个 铺垫 。 

@ 第 24 行 代码 通过 “data” 参数 定义 了 属性 ( data ), 该 属性 ( data ) 就 是 第 18~21 行 代码 定义 
的 数据 对 象 。 

@ 第 25~29 行 代码 通过 “methods” 参 数 定义 了 一 个 函数 (all ), 特别 之 处 是 仍 使 用 了 属性 (title 
和 content ). 读 者 可 能 会 有 疑问 ,第 24 行 代码 中 并 没有 显 式 地 定义 这 两 个 属性 (title 和 content )， 
代码 会 不 会 报错 呢 ? 没关系 ， 我 们 通过 下 面 的 测试 结果 看 一 下 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 13.4 所 示 。 
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定义 "data" 参 数 属性 的 另 一 种 方法 . 
Vue 构 造 器 "data 参数 : 定义 "data "参数 属性 的 另 一 种 方法 . 


图 13.4 ”Vuejs 构造 器 "data" 参 数 


如 图 13.4 所 示 ， 页 面 中 成 功 显示 了 通过 Vuejs 框架 泻 染 出 的 文本 内 容 ， 包 括 通过 JSON 结构 
数据 对 象 (data) 定义 的 属性 以 及 函数 方法 (all) 对 属性 (title 和 content) 的 引用 的 代码 都 正确 执 
和 

为 了 进一步 验证 Vuejs 构 造 器 所 定义 的 属性 与 页 面 视图 中 所 泻 染 的 内 容 之 间 完 全 是 响应 式 的 ， 
可 以 通过 修改 属性 的 操作 进行 测试 。 下 面 看 一 个 通过 Vue 构造 器 修改 属性 实现 响应 式 页 面 效果 的 
代码 实例 。 


【代码 13-4】( 详 见 源 代码 目录 ch13-vue-js-vue-modify-data.html 文件 ) 


01 <!DOCTYPE html> 

02 <html> 

03 <head> 

04 <script src="js/vue.js"></script> 
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05 
06 
07 
08 
09 
10 
1 
12 
了 
14 
人 
16 
17 
18 


19 


20 
El 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
3 
38 
39 
40 
41 
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43 
44 
45 


<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript Vue.js 开发 - Vue 构造 器 修改 属性 </nav> 
</header> 


<div id='id-div-vue'> 


</button> 


</button> 


<hl>{{f title }}</h1> 
<h3>{{ content }}</h3> 
<p>{{ all() }}</p> 
</div> 
<div> 
<button id="id-btn-data" onclick="on btn data() "> 通过 data 对 象 修改 属性 
<button id="id-btn-app" onclick="on_ btn_app () "> 通过 app 对 象 修改 属性 
</div> 
<script type="text/javascript"> 


var data = { 

title : "Vue 构造 器 \"mdata\ "参数 "， 

content : "定义 \"data\" 参 数 属性 的 另 一 种 方法 ." 
} 
var app = new Vuel({ 

el: '#id-div-vue', 

data: data, 

methods: { 

Ql fonction (yl 
return this.title + " : " + this.content; 


Bn 
/** 
* func button click - data 
A 
function on btn data() { 
if(app.title === data.title) { 
data.title = "Vue 构造 器 修改 属性 "; 


1 

J/ 

* func button click = app 
ai 
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46 function on btn app() { 

47 ifl(app.content === data.content) { 

48 app.content = "通过 app 对 象 修改 content 属性 ."; 
49 了 

50 |， 

51 </script> 

52 </body> 

53 </html> 


关于 【代码 13-4】 的 说 明 : 


@ 【代码 13-4】 是 在 【代码 13-3】〗 的 基础 上 修改 而 成 的 ， 主 要 就 是 增加 了 两 个 按钮 ， 用 于 实现 


修改 属性 的 操作 。 


@ 第 38~42 行 代码 实现 了 第 18 行 代码 所 定义 <button> 按 钮 (id="id-btn-data" ) 的 单 击 onclick 
事件 方法 。 第 39 行 代码 先 判断 分 别 通过 Vue 对 象 (app) 与 JSON 对 象 (data ) 引用 的 属性 
(title ) 是 否 恒 等 ， 然 后 第 40 行 代码 通过 JSON 对 象 ( data ) 修改 属性 (title ) 值 。 

@ 第 46~50 行 代码 与 第 38~42 行 代 码 类 似 ， 不 同 之 处 是 第 48 行 代码 通过 Vue 对 象 (app ) 修 


改 属性 (content ) 值 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 13.5 所 示 。 
在 图 13.5 中 ， 我 们 单 击 页 面 中 的 “通过 data 对 象 修改 属性 ”按钮 ， 页 面 效果 如 图 13.6 所 示 。 


园 ,evascript 全 程 实 刚 x ee 口 


CG © Ilocalhost'5334: 加 为 


JavaScript Vuejs 开 发 - Vue 构 造 器 修改 属性 


x 


贺 Javascript 全 研 实 网 x lee 0 
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Vue 构 造 器 "data "参数 
定义 "data" 参 数 尾 性 的 另 一 种 方法 . 
Vue 构 造 器 "data "参数 : 定义 "data "参数 属性 的 吨 一 种 方法 . 


通过 data 对 象 修改 属性 。 通过 app 对 象 修改 属性 


图 13.5 Vuejs 构造 器 修改 属性 (一) 


图 13.6 ”Vuejs 构造 器 修改 属性 (二) 


如 图 13.6 中 的 箭头 所 示 ， 通 过 JSON 对 象 (data) 修改 的 属性 (title) 值 成 功 泻 染 到 页 面 中 了 。 
下 面 我 们 接着 单 击 页 面 中 的 “通过 app 对 象 修改 属性 ”按钮 ， 页 面 效 果 如 图 13.7 所 示 。 
如 图 13.7 中 的 箭头 所 示 ， 通 过 Vue 对 象 (app) 修改 的 属性 (content) 值 同样 成 功 泻 染 到 页 面 


中 了 。 


读者 可 能 注意 到 了 ， 在 【代码 13-4】 中 分 别 通过 Vue 对 象 (app) 和 JSON 对象 (data) 修改 
了 两 个 属性 值 (title 和 content)， 那 么 通过 一 个 对 象 修改 的 属性 值 是 不 是 同步 到 通过 另 一 个 对 象 来 


引用 相同 的 属性 值 呢 ? 答案 是 肯定 的 。 
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园 JavaScript 全 程 实 刚 x 
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Vue 构 造 器 修改 属性 
通过 app 对 象 修改 content 属 性 . 
Vue 构 造 器 修改 属性 : 通过 app 对 人 象 修改 content 属 性 . 


13.7 ”Vuejs 构造 器 修改 属性 三) 


为 了 验证 这 个 同步 性 ， 我 们 可 以 在 【代码 13-4】 中 加 入 浏览 器 控制 台 调试 代码 进行 属性 值 的 
同步 输出 ， 具 体 代码 如 下 。 


【代码 13-5】( 详 见 源 代码 目录 ch13-vue- -data-sync.html 文件 ) 


01 <script type="text/javascript"> 

02 Wa 

03 * func button click - data 

04 Es 

05 function on btn data() { 

06 if(app.title === data.title) { 

07 data.title = "Vue 构造 器 修改 属性 "; 

08 console.1o0g ("修改 data.title 为 : Vue 构造 器 修改 属性 ") ; 
09 console.log("app.title= " + app.title); 

10 } 

hi } 

12 Ui 

3 * func button click - app 

14 yh 

5 function on btn app() { 

16 if(app.content === data.content) { 

ey] app.content = "通过 app 对 象 修改 content 属性 ."; 
18 console.10g ("修改 app .content 为 : 通过 app 对 象 修改 content 属性 .") ; 
19 console.log("data.content= " + data.content); 
20 } 

2 二 } 

22 </script> 
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关于 【代码 13-5】 的 说 明 : 


@ 【代码 13-5】 是 在 【代码 13-4】 的 基础 上 修改 而 成 的 ， 主 要 就 是 增加 了 第 09 行 代码 和 第 19 
行 代 码 ， 通 过 浏览 器 控制 台 进 行 属性 值 的 同步 输出 验证 。 
下 面 使 用 Firefox 浏览 


运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 13.8 和 图 13.9 所 示 。 


如 图 13.8 中 的 箭头 和 标识 所 示 , 通过 JSON 对 象 (data ) 修 改 的 属性 (title ) 值 会 同步 到 “app.title” 
属性 中 。 


国 ,avascript 全 得 安 例 x Es 


£ QC © localhost63342/s-tota-s v 以 » 


JavaScript Vuejs 开 发 - Vue 构 造句 属性 同步 


民 © nspector 回 Console D Debugger {}) StyleEditor » 加 … X 
自 时 pherouput Drenist togs 

1 item dden by filters Reset fiters 
修改 data ,title 为 : Vue 构 过 器 修改 震 性 chl3-vue-js-vue-data-sync,html:61:13 
app ,title Vue 构 造 器 修改 属性 


cha3-voe-js-vue-data-sync。 


:82:13 


通过 data 对 象 修改 "title "属性 值 后 ， 会 同步 到 "appitle" 属 性 


图 13.8 Vuejs 构造 器 属性 同步 (一) 


JavaScript 全 程 实例 x By 


人 加 localhost63342/js-total-sa 


Javascript Vuejs 开 发 - Vue 构 造 器 属性 同步 


Vue 构 造 器 修改 属性 


通过 app 对 象 修改 content 属 性 . 


民 Oinspector 回 Console D Debugger {} StyleEditor 为 1 es 
窗 时 Fiteroutput 口 persisttoos 


1 item hidden by fifters Reset fters 
个 data title 为 : wue 构 二 回覆 改 属性 


app title= wae 构 和 加 和 覆 改 属性 


修 Kapp content 为: 通过 spp 对象 修 改 content 属 性 - 
deta.content- 通过 spp 对 象 修改 content 遇 性 . 


通过 app 对 象 修改 "content" 属 性 信 后 ,会 同步 到 "data content" 属 性 


13.9 ”Vuejs 构造 器 属性 同步 (二 》 
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如 图 13.9 中 的 箭头 和 标识 所 示 ， 通 过 Vue 对 象 (app) 修改 的 属性 (content) 值 会 同步 到 
“data.content” 属 性 中 。 


13.5 ”Vue.js 构造 器 参数 引用 


在 Vuejs 框架 中 ， 还 提供 了 一 个 “$” 前 缀 符号 来 引用 Vue 构造 器 的 参数 ， 以 便 将 其 与 用 户 自 
定义 的 属性 进行 区 分 。 下 面 看 一 个 关于 使 用 Vue 构造 器 的 “$” 前 组 符号 引用 参数 的 代码 实例 。 


【代码 13-6】( 详 见 源 代码 目录 ch13-vue-js-vue-params.html 文件 ) 


01 <!DOCTYPE html> 

02 <html> 

03 <head> 

04 <script src="js/vue.js"></script> 
05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript Vue.js 开发 - Vue 构造 器 参数 引用 </nav> 
11 </header> 

12 <div id='id-div-vue'> 


3 <h1l>{{ title }}</h1l> 

14 <h3>{{ content }}</h3> 

5 <p>{{ getData() }}</p> 

16 <p>{{ getE1() }}</p> 

17 </div> 

18 <script type="text/javascript"> 

19 var data = { 

20 title : "Vue 构造 器 参数 引用 "， 

2 content : "通过 Vue 构造 器 参数 泻 染 页 面 ." 
汉 肥 } 

23 Var app = new Vuel({ 

24 el: '#id-div-vue', 

25 data: data, 

26 methods: { 

2 getData : function () { 

28 if(this.$data === data) { 
29 return eval (this.$data); 
30 } 


31 } 
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32 getE1 : function() { 


号 3 if(this.S$el === document .getElementById('id-div-vue')) { 


34 return this.$el.innerText; 
25 } 

36 

3 L 

38 i 

39 </script> 

40 </body> 

41 </html> 


关于 【代码 13-6】 的 说 明 : 


@ 第 27~31 行 代码 在 “methods” 参 数 中 定义 了 第 一 个 函数 方法 (getData )， 具 体内 容 如 下 : 
> 第 28 行 代码 先 通 过 让 条 件 语句 判断 Vue 构造 器 (app ) 的 data 参数 ( 注意 需要 通过 “$” 
符号 引用 ) 与 “data” 属 性 ( 指 代 第 19 ~ 22 行 代码 定义 的 JSON 对 象 ) 是 否 恒 等 ; 


> 如 果 判 断 结 果 为 “true"， 第 29 行 代码 会 直接 返回 data 参数 (this.$data )。 


@ 第 32~36 行 代码 在 “methods” 参 数 中 定义 了 第 二 个 函数 方法 (getE1)， 具 体内 容 如 下 : 
> 第 33 行 代码 先 通 过 让 条 件 语句 判断 Vue 构造 器 (app ) 的 el 参数 (注意 需要 通过 “$” 符 


号 引用 ) 与 DOM 对 象 (<div id=-'id-div-vue> ) 是 否 恒 等 ; 


> 如 果 判 断 结果 为 “true”， 第 34 行 代码 会 直接 返回 DOM 对 象 (this.$el ) 的 文本 内 容 


(innerText )。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 13.10 所 示 。 


园 Javascript 全 程 实例 x | 十 ee | 


CQ 全 © localhost:63342/js-tot ov 回 从 |》 


Javascript Vuejs 开 发 - Vue 构 造 器 参数 引用 


x 


Vue 构 造 器 参数 引用 
通过 Vue 构 造 器 参数 泻 染 页 面 . 
{ "title": "Vue 构 和 器 参数 引用 "，"content'; "通过 Vue 构 造 器 参数 这 次 页 面 ， } 


{{title } {content }} {{ getData0 }} {{ getEI0 } 


13.10 ”Vuejs 构造 器 参数 引用 


参数 ，$data 


参数 $el 的 innerText 属 性 
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13.6 ”Vue.js 模板 语法 


Vuejs 框架 使 用 了 基于 HTML 的 模板 语法 ， 其 核心 思想 就 是 允许 设计 人 员 使 用 简洁 的 模板 语 
法 以 声明 的 方式 将 数据 泻 染 进 DOM 对 象 中 。 同 时 ， 借 助 Vuejs 框架 特有 的 响应 方式 ， 即 在 应 用 状 
态 发 生 改 变 时 能 够 优化 计算 出 重新 演 染 组 件 的 最 小 代价 并 应 用 到 DOM 对 象 中 。 

其 实 ， 在 前 面 几 个 代码 实例 中 所 使 用 的 “{{ 分 ”就 是 最 简单 的 文本 模板 插入 方式 。 当 然 ， 
除了 最 基础 的 文本 插入 方式 之 外 ， 还 有 HTML 代码 插入 、 属 性 插入 、 表 达 式 插入 等 。 在 本 节 中 ， 
我 们 简要 介绍 一 下 关于 Vue.js 框架 模板 语法 的 内 容 。 

首先 ， 我 们 看 一 个 比较 特殊 的 、 关 于 使 用 文本 模板 插入 方式 的 代码 示例 。 


【代码 13-7】( 详 见 源 代码 目录 ch13-vue-js-tmpl-once.html 文件 ) 


01 <!DOCTYPE html> 

02 <html> 

03 <head> 

04 <script src="js/vue.js"></script> 

05 <title>JavaScript 全 程 实例 </title> 

06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript Vue.js 开发 - Vue 模板 语法 (文本 插入 ) </nav> 

11 </header> 

12 <div id='id-div-vue'> 

3 <h3>{{ title }}</h3> 

14 <P v-text="content"></p> 

ES <p v-once>{{ contentOnce }}</p> 

16 </div> 

17 <div> 

18 <button id="id-btn-change-data" onclick= 
"on_btn_change_text () "> 尝试 修改 文本 </button> 


19 </div> 

20 <script type="text/javascript"> 
21 yi 

22 * Vue constructor 

23 

24 Var app = new Vuel({ 

2 el: '#id-div-vue', 

26 data: { 


23 title : "Vue 模板 语法 (文本 插入 ) "， 
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28 content : "尝试 修改 本 行 的 文本 内 容 ."， 

29 contentOnce : "尝试 修改 本 行 的 文本 内 容 ." 

30 上 

3 Ds 

32 

33 * func button click - data 

34 a 

35 function on btn change text() { 

36 app.$data.content = "修改 本 行 的 文本 内 容 完 成 !"; 

37 console.log("data.content is modified : " + app.$data.content); 

38 app.$data.contentOnce = "修改 本 行 的 文本 内 容 完成 !"; 

39 console.log("data.contentOnce is modified : "+ 
app.$data.contentOnce); 

40 } 

41 </script> 

42 </body> 

43 </html> 


关于 【代码 13-7】 的 说 明 : 
@ 第 14 行 代码 在 <p> 标 签 元 素 内 通过 “v-” 前 组 指令 (Vv-text ) 定义 了 一 个 插入 文本 (content )， 


对 应 第 28 行 代码 定义 的 Vue 构造 器 属性 (content ) 值 。 


@ 第 15 行 代码 在 <p> 标 签 元 素 内 添加 了 一 个 “v-” 前 组 指令 ( v-once )， 该 指令 将 会 执行 一 次 性 


插入 文本 的 操作 。 具 体 来 讲 ， 就 是 当 改 变 第 29 行 定义 的 Vue 构造 器 属性 (contentOnce ) 值 
时 ， 不 会 同步 更 新 第 15 行 代码 中 属性 ( contentOnce ) 值 所 显示 的 内 容 。 


@ 第 35~40 行 代码 实现 的 按钮 单 击 事件 方法 (on_btn_change_text( ) 同时 修改 了 Vue 构造 器 属 


性 content 和 contentOnce 的 值 ， 并 在 浏览 器 控制 台中 输出 了 修改 后 的 结果 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效 果 如 图 13.11 所 示 。 


图 Javascript 全 程 实 便 xit = 


GC © localhost63342/ ee 会 | 为 


JavaScript Vue.js 开 发 - Vue 模 板 语法 (文本 插入 ) 


Vue 模 板 语法 (文本 插入 ) 


兰 试 修改 本 行 的 文本 内 容 . 


尝试 收 改 本 行 的 文本 内 容 . 


图 13.11 Vuejs 模板 语法 之 文本 插入 (一 ) 
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如 图 13.11 中 的 箭头 所 示 ， 单 击 “ 举 试 修改 文本 ”按钮 ， 页 面 效果 如 图 13.12 所 示 。 


JavaScript 全 程 实例 x es 去 口 X 


全 © localhost63342Jjs-total-s … 加 个 | 三 
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尝试 修改 本 行 的 文本 内 容 . 


没有 进行 同步 更 新 和 


民 © Inspector 回 Console D Debugger {} StyleEditor (DN Performance » 面 … x 


窗 时 Fiteroutput 两 个 属性 值 已 经 进行 了 同步 更 新 四 
aden by filters Reset fiters 


22:86:83.797 data.content is modified : 修改 本 行 的 文本 内 容 先 成 chi3-ve-js-tmpl-once.htnl:71:9 
22:86:83.797 data.contentonce 15 modified : , 覆 改 本 行 的 文本 内 容 充 成 ! ch13-vue-js-tmpl-once.html:73:9 
»| 


图 13.12 ”Vuejs 模板 语法 之 文本 插入 (二 ) 


如 图 13.12 中 的 箭头 和 标识 所 示 , 单 击 “ 尝 试 修改 文本 ”按钮 后 , 根据 浏览 器 控制 台中 的 输出 ， 
可 以 看 出 两 个 Vue 构造 器 属性 (content 和 contentOnce) 值 已 经 更 改 了 。 同 时 ， 第 14 行 代码 定义 
的 插入 文本 (content) 进行 了 同步 更 新 ， 但 第 15 行 代码 由 于 添加 了 “v-” 前 缀 指令 (v-once) 而 没 
有 得 到 同步 更 新 。 

Vuejs 框架 模板 不 仅仅 支持 文本 插入 〈v-text) ， 还 支持 直接 插入 HTML 代码 进行 泻 染 ， 有 具体 
方法 是 通过 “v-” 前 级 指令 (v-html) 来 实现 的 。 下 面 我 们 看 一 个 关于 使 用 HTML 代码 模板 插入 方 
式 的 代码 示例 。 


【代码 13-8】( 详 见 源 代码 目录 ch13-vue-js-tmpl-html.html 文件 ) 


01 <!DOCTYPE html> 

02 <html> 

03 <head> 

04 <script src="js/vue.js"></script> 

05 <title>JavaScript 全 程 实例 </title> 

06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript Vue.js 开发 - Vue 模板 语法 (HTML 插入 ) </nav> 
11 </header> 

12 <div id='id-div-vue' v-html="htmlContent"> 
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13 </div> 

14 <script type="text/javascript"> 

5 

16 * Vue constructor 

ET a 

18 var app = new Vuel({ 

19 el: '#id-div-vue', 

20 data: { 

21 htmlContent : '<h3>Vue 模板 语法 (HTML 插入 ) </h3><p> 
使 用 HTML 代码 插入 方式 .</p>' 

世 } 

2 1D); 

24 </script> 

25 </body> 

26 </html> 


关于 【代码 13-8】 的 说 明 : 

@ 第 12 行 代码 在 <div> 标 签 元 素 内 通过 “v-” 前 组 指令 ( v-html ) 定义 了 一 段 HTML 插入 代码 ， 
对 应 第 21 行 代码 定义 的 Vue 构造 器 属性 htmlContent 值 。 

@ 在 Vue 构造 器 内 的 第 21 行 代码 中 ， 通 过 属性 htmlContent 定义 了 一 段 HTML 代码 (<h3>、 
<p> )。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 13.13 所 示 。 

贺 ,avascript 全 程 实例 Xx | 十 a 口 x 
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Vue 模 板 语法 (HTML 插 入 ) 


使 用 HTML 代 码 插入 方式 . 
通过 插入 HTML 代 码 实现 


图 13.13 Vuejs 模板 语法 之 HTML 插入 


Vuejs 框架 还 设计 了 一 个 非常 有 意思 的 动态 绑 定 功能 ， 通 过 “v-” 前 组 指令 〈v-bind) 来 实现 。 
举 个 例子 说 明 一 下 ， 我 们 知道 HTML 5 标准 规范 中 为 标签 元 素 新 增 了 一 个 “title” 属 性 ， 可 以 实现 
“ 当 鼠 标 停留 在 该 元 素 上 时 显示 出 一 个 工具 提示 文本 〈Tooltip Text) ”的 效果 。 借 助 “v-” 前 级 指 
令 (v-bind) ， 可 以 实现 功能 更 强 的 动态 绑 定 效果 。 下 面 看 一 个 具体 的 代码 示例 。 
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【代码 13-9】( 详 见 源 代码 目录 ch13-vue-js-tmpl-bi 


01 <!DOCTYPE html> 

02 <htm1> 

03 <head> 

04 <script src="js/vue.js"></script> 

05 <title>JavaScript 全 程 实例 </title> 

06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript Vue.js 开发 - Vue 模板 语法 (动态 绑 定 ) </nav> 
11 </header> 

12 <div id='id-div-vue'> 

3 <h3 v-text="title"></h3> 

14 <p v-bind:title="htmlContent"> 页 面 更 新 时 间 (通过 鼠标 悬 停 查看 ) </p> 
15 < /di 

16 <script type="text/javascript"> 


eT WE 

18 * Vue constructor 

19 id 

20 var app = new Vuel({ 

21 el: '#id-div-vue', 

22 data: { 

23 title : "动态 绑 定 HTML 代码 "， 
24 htmlContent : new Date() .toLocaleString () 
25 让 

26 Ts 

27 </script> 

28 </body> 

29 </html> 


关于 【代码 13-9】 的 说 明 : 

”第 14 行 代码 在 <p> 标 签 元 素 内 通过 “v-” 前 组 指令 (v-bind ) 绑 定 了 “title” 属 性 (代码 形式 
为 v-bind:title )， 绑 定 的 内 容 是 第 24 行 代码 定义 的 Vue 构造 器 属性 htmlContent 值 。 

@ 在 Vue 构造 器 内 的 第 24 行 代 码 中 ， 通 过 属性 htmlContent 定义 了 一 段 JavaScript 代码 (通过 
Date 对 象 获取 了 当前 时 间 )。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 13.14 所 示 。 
如 图 13.14 中 的 箭头 所 示 ， 当 我 们 将 鼠标 悬 停 在 提示 文本 上 时 会 弹出 一 个 工具 提示 文本 
(Tooltip Text) ， 显 示 当 前 时 间 。 
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JavaScript Vue.js 开 发 - Vue 模 板 语法 (动态 绑 定 ) 


动态 绑 定 HTML 代 码 


页 面 更 新 时 间 ( 通 过 鼠标 悬 停 查 看 ) 


A 2/15/2019, 1:58:09 PM 


图 13.14 ”Vuejs 模板 语法 之 动态 绑 定 


13.7 ”Vue.js 条 件 循环 语句 


Vuejs 框架 设计 的 “v-” 前 级 指令 非常 强大 ， 提 供 了 带 有 人 逻辑 控制 功能 的 条 件 语句 〈v-if) 和 
循环 语句 〈v-for) 。 比 如 ， 使 用 Vue 条 件 语 句 就 可 以 很 方便 地 实现 “显示 或 隐藏 ”元 素 内 容 的 功 
能 。 在 传统 的 JavaScript 方式 下 ， 需 要 编写 相对 复杂 的 切换 CSS 样式 的 代码 来 实现 。 

首先 ， 我 们 看 一 个 使 用 Vue 条 件 语句 控制 页 面 元 素 内 容 切 换 “ 显 示 / 隐 藏 ”效果 的 代码 实例 。 


【代码 13-10】( 详 见 源 代码 目录 ch13-vue-js-v-if html 文件 ) 


01 <!DOCTYPE html> 

02 <html> 

03 <head> 

04 <script src="js/vue.js"></script> 
05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript Vue.js 开发 - Vue 条 件 语句 </nav> 
11 </header> 

12 <div id='id-div-vue'> 


a3 <h1>{{ title }}</h1l> 

14 <p v-if="show">{{ content }}</p> 
15 <p v-if="hide">{{ content }}</p> 
16 </div> 


17 <script type="text/javascript"> 
18 var app = new Vuel({ 
人 el: '#id-div-vue', 
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20 data: { 

2 title: "Vue 条 件 语句 "， 

22 content : "文本 : 通过 Vue 条 件 语 句 可 以 实现 可 见 /隐藏 效果 ."， 
3 show: true, 

24 hide: false 

2 } 

26 a 

27 </script> 

28 </body> 

29 </html> 


关于 【代码 13-10】 的 说 明 : 

@ 第 14 行 和 第 15 行 代码 分 别 在 <p> 标 签 元 素 内 通过 “v-” 前 组 指令 (v-if) 定义 了 一 个 条 件 语 
句 ， 分 别 对 应 第 23 行 和 第 24 行 代 码 定义 的 Vue 构造 器 属性 (show:true 和 hide:false ) 值 。 

@ 在 Vue 构 造 器 内 ， 第 23 行 代 码 中 的 属性 (show ) 定义 为 tue ( 真 ) 值 ， 而 第 24 行 代码 中 的 
属性 (hide ) 定义 为 false( 假 ) 值 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 13.15 所 示 。 

图 JavaScript 全 程 实例 bs | 十 名 口 x 
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JavaScript Vuejs 开 发 - Vue 条 件 语句 


Vue 条 件 语句 


文本 : 通过 Vue 条 件 语句 可 以 实现 可 见 / 隐 藻 效果 - 
此 处 的 内 容 被 隐藏 了 {vitfalse | 


图 13.15 ”Vuejs 条 件 语句 

如 图 13.15 中 的 箭头 和 标识 所 示 ， 通 过 Vue 条 件 语 句 (v-if:true) 插入 的 段落 内 容 可 以 显示 出 
来 ， 而 通过 Vue 条 件 语 句 〈v-iffalse) 插入 的 段落 内 容 则 被 隐藏 了 。 

下 面 我 们 看 一 个 使 用 Vue 循环 语句 在 页 面 中 控制 输出 列表 的 代码 实例 。 


【代码 13-11】( 详 见 源 代码 目录 ch13-vue-js-v-for.html 文件 ) 


01 <!DOCTYPE html> 

02 <html> 

03 <head> 

04 <script src="js/vue.js"></script> 
05 <title>JavaScript 全 程 实例 </title> 
06 </head> 
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07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript Vue.js 开发 - Vue 循环 语句 </nav> 
11 </header> 

12 <div id='id-div-vue'> 


23 <hl>{{f title }}</h1> 

14 <ol> 

15 <li v-for="li in arrLi"> 
16 A 

3 </1i> 

18 </ol> 

19 </div> 

20 <script type="text/javascript"> 
这 出 var app = new Vuel({ 

攻 交 el: '#id-div-vue', 

23 data: { 

24 title: "循环 语句 "， 

2 及 SEETLS | 

26 {text: 'JavaScript'}, 
2 {text: 'React'}, 
28 {text: 'Vue.js'} 
29 ] 

30 } 

31 ]) 7 

32 </script> 

33 </body> 

34 </html> 


关于 【代码 13-11】 的 说 明 : 
@ 第 14~ 18 行 代码 通过 <oP><li> 标 签 元 素 定 义 了 一 个 列表 ， 具 体 说 明 如 下 : 
> 第 15 行 代码 的 <li> 标 签 元 素 内 通过 “v-” 前 组 指令 (v-for ) 定 义 了 一 个 循环 语句 (liin arrLi)。 
相信 读者 发 现 了 ， 这 里 很 像 传 统 的 “for...in...” 循 环 语句 。 确 实 如 此 ， “li” 本 身 是 一 个 
自 变量 ，“arrLi” 对 应 第 25 ~29 行 代码 定义 的 Vue 构造 器 属性 (arrLi ) 数组 值 。 
> 第 16 行 代码 通过 自 变 量 1i (“arrLi” 数 组 项 ) 引用 “text” 属 性 ， 实 现 列 表 项 的 输出 。 
@ 在 Vue 构造 器 内 ， 第 25~29 行 代码 定义 的 属性 (arrLi) 是 一 个 数组 结构 ， 这 个 数组 其 实 就 
是 一 个 JSON 结构 的 对 象 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 13.16 所 示 。 
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JavaScript Vuejs 开 发 - Vue 循 环 语句 


循环 语句 
1. JavaScript 
2. React 


3. Vuejs 
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13.8 ”Vue.js 事件 监听 处 理 


Vuejs 是 一 个 基于 JavaScript 实现 的 高 性 能 框架 ， 事 件 监听 处 理 功能 是 必须 具备 的 。Vue.js 事 
件 监听 是 通过 “v-” 前 组 指令 (v-on) 实现 的 ， 使 用 “on” 是 继承 自 JavaScript 事件 方法 的 名 称 〈 比 
如 onclick、onchange、onfocus 等 ) 。 

在 前 文 的 Vue 条 件 语 句 中 ， 我 们 实现 了 “显示 /隐藏 ”内 容 的 效果 。 下 面 我 们 在 此 基础 上 实现 
一 个 通过 用 户 操作 切换 内 容 “ 显 示 / 隐 藏 ”效果 的 实例 。 


【代码 13-12】( 详 见 源 代码 目录 ch13-vue-js-v-on.html 文件 ) 


01 <!DOCTYPE html> 

02 <html> 

03 <head> 

04 <script src="js/vue.js"></script> 
05 <title>JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript Vue.js 开发 - Vue 事件 监听 处 理 </nav> 
11 </header> 

12 <div id='id-div-vue'> 


3 <hl>{{f title }}</h1> 

14 <p v-if="show" v-html="contentShow"></p><br> 

3 <p v-if="hide" v-html="contentHide"></p><br> 

16 <button v-on:click="onShowHide"> 切 换 “ 显 示 / 隐 藏 ”效果 </button> 


17 </div> 
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18 <script type="text/javascript"> 


19 

20 * Vue constructor 

2 人 

22 Var app = new Vue({ 

人 23 el: '#id-div-vue', 

24 data: { 

25 title: "Vue 条 件 语句 "， 

26 contentShow: "通过 Vue 条 件 语句 可 以 实现 <b> 可 见 </b> 效 果 ."， 
2 contentHide: "通过 Vue 条 件 语句 可 以 实现 <b> 隐 藏 </b> 效 果 ."， 
28 show: true, 

29 hide: false 

30 bs 

3 methods: { 

32 

3 * func - change show/hide effect 
34 A 

对 入 onShowHide: function () { 

36 if(this.show) { 

二 console.1log (this.show); 
38 this.show = false; 

39 this.hide = true; 

40 } else { 

41 console.log (this.show); 
42 this.show = true; 

43 this.hide = false; 

44 } 

45 } 

46 

全 7 ]) 7 

48 </script> 

49 </body> 

50 </html> 


关于 【代码 13-12】 的 说 明 : 
ee 在 第 14 行 和 第 15 行 代码 


中 ， 分 别 在 <p> 标 签 元 素 内 通过 “v-” 前 组 指令 (v- 这 ) 定义 了 一 个 


条 件 语句 ， 分 别 对 应 第 28 行 和 第 29 行 代码 定义 的 Vue 构造 器 属性 (show:true 和 hide:false ) 
值 ; 同时 ， 在 <p> 标 签 元 素 内 还 通过 “v-” 前 缓 指令 (v-html ) 定义 了 一 段 HTML 插入 代码 ， 
分 别 对 应 第 26 行 和 第 27 行 代码 定义 的 Vue 构造 器 属性 ( contentShow 和 contentHide ) 值 ， 
我 们 的 目标 就 是 通过 用 户 操作 来 切换 显示 这 两 个 段落 的 内 容 。 

日 在 Vue 构 造 器 内 ， 第 28 行 代码 中 的 属性 (show ) 定义 为 true ( 真 ) 值 ， 而 第 29 行 代码 中 的 


属性 (hide ) 定义 为 false 


( 假 ) 值 。 
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@ 在 第 16 行 代码 中 ， 在 <button> 标 签 元 素 内 通过 “v-” 前 缓 指令 (von:click ) 定义 了 一 个 单 击 
事件 处 理 方法 (onShowHide )。 

”在 第 31~46 行 代 码 定义 的 “methods” 参 数 中 ， 第 35~ 45 行 代码 实现 了 单 击 事件 处 理 方法 
(onShowHide )。 第 36~44 行 代码 通过 证 条件 语句 切换 定义 属性 (show ) 和 属性 (hide ) 的 
布尔 值 (true 或 false )， 从 而 实现 响应 式 的 内 容 “显示 /隐藏 ”切换 效果 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 13.17 所 示 。 
下 图 javascript 全 程 实例 X 
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JavaScript Vue.js 开 发 - Vue 事 件 监听 处 理 


Vue 条 件 语句 


通过 Vue 条 件 语句 可 以 实现 可 见效 果 . 


切换 " 旦 示 / 隐 划 效果 


图 13.17 Vuejs 事件 监听 实现 “显示 /隐藏 ”切换 效果 (一) 


如 图 13.17 中 的 箭头 和 标识 所 示 ， 页 面 初始 状态 显示 的 是 “可 见 ” 效 果 的 文本 内 容 。 下 面 ， 我 
们 单 击 一 次 “切换 "显示 /隐藏 "效果 ”按钮 ， 页 面 更 新 效果 如 图 13.18 所 示 。 
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Vue 条 件 语句 


通过 Vue 条 件 语句 可 以 实现 隐藏 效果 . 


切换 ' 号 示 / 隐 营 效果 


图 13.18 ”Vuejs 事件 监听 实现 “显示 /隐藏 ”切换 效果 (二) 


如 图 13.18 中 的 箭头 和 标识 所 示 ， 此 时 页 面 状态 切换 到 “隐藏 ”效果 的 文本 内 容 。 读 者 可 以 尝 


试 连续 单 击 “ 切 换 "显示 /隐藏 "效果 ”按钮 ， 测 试 一 下 Vue.js 框架 特有 的 响应 式 的 内 容 泻 染 切 换 
效果 。 


